Projet d'inertie Laravel 9 Vue 3
P粉347804896
2023-08-28 19:25:31
<p>Je construis un SPA en utilisant Laravel avec Vue.js et vite, et j'ai un autre projet CMS utilisant Laravel Breeze et Inertia js. Comment puis-je fusionner ces deux projets en un seul ? Je pourrais donc avoir un projet SPA avec un CMS, comme une page d'administration, que vous pourriez configurer via le routage.
Est-il possible? </p>
<p>Voici app.js de mon projet CMS</p>
<pre class="brush:php;toolbar:false;">importer '../css/app.css';
importer { createApp, h } depuis 'vue' ;
importer { createInertiaApp } depuis '@inertiajs/vue3' ;
importer { solvePageComponent } depuis 'laravel-vite-plugin/inertia-helpers' ;
importer { ZiggyVue } depuis '../../vendor/tightenco/ziggy/dist/vue.m' ;
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
créerInertiaApp({
titre : (titre) => `${title} - ${appName}`,
résoudre : (nom) => résoudrePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ élément, application, accessoires, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plug-in)
.use(ZiggyVue, Ziggy)
.mount(el);
},
progrès: {
couleur : '#4B5563',
},
});</pré>
<p>Voici app.js de mon projet SPA</p>
<pre class="brush:php;toolbar:false;">importer '../css/navbar.css';
importer '../css/home.css';
importer '../css/kenapa.css';
importer '../css/ceritakami.css';
importer '../css/karir.css';
importer '../css/lowongan.css';
importer '../css/media.css';
importer '../css/gabung.css';
importer '../css/mitra.css';
importer '../css/download.css';
importer '../css/footer.css';
importer { createApp } depuis 'vue' ;
importer l'application depuis './layouts/app.vue' ;
createApp(App).mount('#app');</pre>
<p>J'ai essayé de copier la page dans le CMS et vice versa mais cela me donne toujours l'erreur.</p>
<p>Je suis un débutant et je n'arrive tout simplement pas à comprendre en utilisant l'inertie car dans mon projet SPA, j'utilise App.vue comme mise en page pour appeler d'autres pages comme celle-ci : </p>
<pre class="brush:php;toolbar:false;"><NavbarVue/>
<Accueil/>
≪Kenapa/>
<Cerita/>
<Karir/>
<Lowongan/>
<Média/>
≪Gabung/>
<Mitra/>
<Télécharger/>
<Pied de page/>
</modèle>
<configuration du script lang="ts">
importer NavbarVue depuis '../components/Navbar.vue' ;
importer Home depuis '../pages/Home.vue';
importer des médias depuis '../pages/Media.vue' ;
importer Kenapa depuis '../pages/Kenapa.vue' ;
importer Cerita depuis '../pages/Cerita.vue' ;
importer Lowongan depuis '../pages/Lowongan.vue' ;
importer Karir depuis '../pages/Karir.vue' ;
importer Gabung depuis '../pages/Gabung.vue' ;
importer Mitra depuis '../pages/Mitra.vue' ;
importer le téléchargement depuis '../pages/Download.vue' ;
importer le pied de page depuis '../components/Footer.vue' ;
</script></pre>
<p>Mais je n'y arrive pas dans l'inertie, quelqu'un peut-il m'éclairer ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Migrer
Créez un nouveau projet Laravel 9 et suivez les instructions pour installer Breeze w/Inertia nad Vue.
Vous déplacerez ensuite les fichiers *.vue vers le nouveau projet et les analyserez de manière appropriée.
Par exemple, vous pouvez obtenir des données via les appels Axios à Spa. Avec Inertia, vous pouvez transmettre des données directement depuis le contrôleur.
De plus, vous devez importer le contrôleur et tous les fichiers PHP associés dans le nouveau projet et les analyser pour être cohérents avec la structure de conception Inertia.
Test
Si vous ne l'avez pas déjà fait, je vous recommande fortement de commencer à tester avec PHPUnit. Un code correctement testé peut rendre la migration des fichiers d'un référentiel à un autre moins fastidieuse.
Conclusion
Dans l’ensemble, cela va être un projet colossal qui prendra probablement plusieurs mois. Cependant, si vous envisagez de fusionner deux projets complètement différents en un seul, la complexité l'exigera, surtout si aucun des deux projets n'a été testé.