Projek Inersia Laravel 9 Vue 3

Question

Saya sedang membina SPA menggunakan Laravel dengan Vue.js dan vite, dan saya mempunyai projek CMS lain menggunakan Laravel Breeze dan Inertia js. Bagaimanakah saya boleh menggabungkan kedua-dua projek ini menjadi satu? Jadi saya boleh mempunyai projek SPA dengan CMS, seperti halaman pentadbir, yang boleh anda sediakan melalui penghalaan. adakah mungkin?

Ini adalah app.js daripada projek CMS saya

import '../css/app.css';

import { createApp, h } daripada 'vue';
import { createInertiaApp } daripada '@inertiajs/vue3';
import { resolvePageComponent } daripada 'laravel-vite-plugin/inersia-helpers';
import { ZiggyVue } daripada '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerTeks || 'Laravel';

createInertiaApp({
    tajuk: (tajuk) =>
    selesaikan: (nama) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    persediaan({ el, Apl, prop, pemalam }) {
        kembalikan createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    kemajuan: {
        warna: '#4B5563',
    },
});

Ini adalah app.js daripada projek SPA saya

import '../css/navbar.css';
import '../css/home.css';
import '../css/kenapa.css';
import '../css/ceritakami.css';
import '../css/karir.css';
import '../css/lowongan.css';
import '../css/media.css';
import '../css/gabung.css';
import '../css/mitra.css';
import '../css/download.css';
import '../css/footer.css';

import { createApp } daripada 'vue';
import Apl daripada './layouts/app.vue';

createApp(App).mount('#app');

Saya cuba menyalin halaman ke dalam CMS dan begitu juga sebaliknya tetapi ia sentiasa memberi saya ralat.

Saya seorang pemula dan saya tidak dapat memikirkannya menggunakan inersia kerana dalam projek SPA saya, saya menggunakan App.vue sebagai susun atur untuk memanggil halaman lain seperti ini:

<NavbarVue/>
    <Rumah/>
    <Kenapa/>
    <Cerita/>
    <Karir/>
    <Lowongan/>
    <Media/>
    <Gabung/>
    <Mitra/>
    <Muat turun/>
    <Pengaki/>
    </template>
    
    <penyiapan skrip lang="ts">
    import NavbarVue daripada '../components/Navbar.vue';
    import Laman Utama daripada '../pages/Home.vue';
    import Media daripada '../pages/Media.vue';
    import Kenapa dari '../pages/Kenapa.vue';
    import Cerita dari '../pages/Cerita.vue';
    import Lowongan dari '../pages/Lowongan.vue';
    import Karir daripada '../pages/Karir.vue';
    import Gabung daripada '../pages/Gabung.vue';
    import Mitra daripada '../pages/Mitra.vue';
    import Muat Turun daripada '../pages/Download.vue';
    import Footer daripada '../components/Footer.vue';
    
    </script>

Tetapi saya tidak boleh melakukannya secara inersia, bolehkah seseorang menyedarkan saya?

Answer 1

Berhijrah

Buat projek Laravel 9 baharu dan ikut arahan untuk memasang Breeze w/ Inertia nad Vue.

• https://laravel.com/docs/9.x/starter-kits#breeze-and-inersia

Anda kemudian akan mengalihkan fail *.vue ke projek baharu dan menghuraikannya dengan sewajarnya.

Sebagai contoh, anda boleh mendapatkan data melalui panggilan Axios di Spa. Dengan Inersia anda boleh menghantar data terus daripada pengawal.

Selain itu, anda mesti mengimport pengawal dan semua fail PHP yang berkaitan ke dalam projek baharu dan menghuraikannya agar selaras dengan struktur reka bentuk Inersia.

Ujian

Jika anda belum berbuat demikian, saya amat mengesyorkan anda mula menguji dengan PHPUnit. Kod yang diuji dengan betul boleh menjadikan pemindahan fail dari satu repositori ke repositori lain kurang menyusahkan.

• https://laravel.com/docs/9.x/testing

Kesimpulan

Secara keseluruhan, ini akan menjadi projek besar-besaran yang mungkin akan mengambil masa beberapa bulan. Walau bagaimanapun, jika anda merancang untuk menggabungkan dua projek yang sama sekali berbeza menjadi satu, kerumitan akan memerlukannya, terutamanya jika kedua-dua projek tidak diuji.