Laravel 9 Vue 3 イナーシャプロジェクト

Question

私は Laravel と Vue.js および vite を使用して SPA を構築しています。また、Laravel Breeze と Inertia js を使用する別の CMS プロジェクトもあります。これら 2 つのプロジェクトを 1 つにマージするにはどうすればよいですか?したがって、ルーティング経由で設定できる管理ページなどの CMS を備えた SPA プロジェクトを作成できます。 出来ますか？

これは私の CMS プロジェクトの app.js です

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

import { createApp, h } から 'vue';
import { createInertiaApp } から '@inertiajs/vue3';
import { replacePageComponent } から 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } から '../../vendor/tightenco/ziggy/dist/vue.m';

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

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    solve: (name) =>solvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ エル、アプリ、小道具、プラグイン }) {
        return createApp({ render: () => h(App, props) })
            .use(プラグイン)
            .use(ZiggyVue、ジギー)
            .mount(el);
    }、
    進捗： {
        色: '#4B5563'、
    }、
});

これは私の SPA プロジェクトの app.js です

import '../css/navbar.css';
インポート '../css/home.css';
インポート '../css/kenapa.css';
インポート '../css/ceritagami.css';
インポート '../css/karir.css';
インポート '../css/lowongan.css';
インポート '../css/media.css';
インポート '../css/gabung.css';
インポート '../css/mitra.css';
インポート '../css/download.css';
インポート '../css/footer.css';

'vue' から { createApp } をインポートします。
'./layouts/app.vue' からアプリをインポートします。

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

ページを CMS にコピーしたり、その逆を試みたりしましたが、常にエラーが発生します。

私は初心者で、SPA プロジェクトでは次のように他のページを呼び出すためのレイアウトとして App.vue を使用しているため、慣性を使用してそれを理解することができません。

<NavbarVue/>
    <ホーム/>
    ＜ケナパ＞
    ＜セリタ＞
    <カリール/>
    <ロウォンガン/>
    <メディア/>
    <ガブン/>
    ＜ミトラ＞
    <ダウンロード/>
    <フッター/>
    </テンプレート>
    
    <スクリプトセットアップ lang="ts">
    '../components/Navbar.vue' から NavbarVue をインポートします。
    '../pages/Home.vue' からホームをインポートします。
    '../pages/Media.vue' からメディアをインポートします。
    Kenapa を '../pages/Kenapa.vue' からインポートします。
    Cerita を '../pages/Cerita.vue' からインポートします。
    '../pages/Lowongan.vue' から Lowongan をインポートします。
    '../pages/Karir.vue' から Karir をインポートします。
    Gabung を '../pages/Gabung.vue' からインポートします。
    '../pages/Mitra.vue' から Mitra をインポートします。
    import '../pages/Download.vue' からダウンロードします。
    '../components/Footer.vue' からフッターをインポートします。
    
    </script>

しかし、惰性でそれを行うことはできません。誰かが私に教えてくれませんか?

Answer 1

移行

新しい Laravel 9 プロジェクトを作成し、指示に従って Breeze w/ Inertia and Vue をインストールします。

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

次に、*.vue ファイルを新しいプロジェクトに移動し、適切に解析します。

たとえば、Spa の Axios 呼び出しを通じてデータを取得できます。 Inertia を使用すると、コントローラーから直接データを渡すことができます。

さらに、コントローラーと関連するすべての PHP ファイルを新しいプロジェクトにインポートし、Inertia 設計構造と一致するように解析する必要があります。

＃＃＃テスト＃＃＃

まだテストを行っていない場合は、PHPUnit でテストを開始することを強くお勧めします。コードを適切にテストすると、あるリポジトリから別のリポジトリへのファイルの移行がより簡単になります。

https://laravel.com/docs/9.x/testing
• ＃＃＃結論は＃＃＃
全体として、これは数か月かかる可能性がある大規模なプロジェクトになります。ただし、2 つのまったく異なるプロジェクトを 1 つにマージする予定がある場合、特にどちらのプロジェクトもテストされていない場合は、複雑さのためにマージが必要になります。