Laravel 9 Vue 3 Inertia-Projekt

Question

Ich baue ein SPA mit Laravel mit Vue.js und vite und habe ein weiteres CMS-Projekt mit Laravel Breeze und Inertia js. Wie kann ich diese beiden Projekte zu einem zusammenführen? Ich könnte also ein SPA-Projekt mit einem CMS haben, etwa eine Admin-Seite, die man per Routing einrichten könnte. Ist es möglich?

Dies ist app.js aus meinem CMS-Projekt

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

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

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

createInertiaApp({
    title: (title) =>
    Auflösung: (Name) => AuflösungPageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, Plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(Plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    Fortschritt: {
        Farbe: '#4B5563',
    },
});

Dies ist app.js aus meinem SPA-Projekt

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 } aus 'vue';
App aus „./layouts/app.vue“ importieren;

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

Ich habe versucht, die Seite in das CMS zu kopieren und umgekehrt, aber es erscheint immer die Fehlermeldung.

Ich bin ein Anfänger und komme mit Trägheit einfach nicht klar, weil ich in meinem SPA-Projekt App.vue als Layout verwende, um andere Seiten wie folgt aufzurufen:

<NavbarVue/>
    <Startseite/>
    <Kenapa/>
    <Cerita/>
    <Karir/>
    <Lowongan/>
    <Medien/>
    <Gabung/>
    <Mitra/>
    <Herunterladen/>
    <Fußzeile/>
    </template>
    
    <script setup lang="ts">
    NavbarVue aus „../components/Navbar.vue“ importieren;
    Home aus '../pages/Home.vue' importieren;
    Medien aus „../pages/Media.vue“ importieren;
    Kenapa aus '../pages/Kenapa.vue' importieren;
    Cerita aus '../pages/Cerita.vue' importieren;
    Importieren Sie Lowongan aus '../pages/Lowongan.vue';
    Karir aus '../pages/Karir.vue' importieren;
    Gabung aus '../pages/Gabung.vue' importieren;
    Mitra aus '../pages/Mitra.vue' importieren;
    Importieren Sie den Download von „../pages/Download.vue“;
    Fußzeile aus '../components/Footer.vue' importieren;
    
    </script>

Aber ich kann es nicht in Trägheit tun, kann mich jemand aufklären?

Answer 1

迁移

创建一个新的 Laravel 9 项目，并按照说明安装 Breeze w/ Inertia nad 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

结论

总的来说，这将是一个庞大的项目，可能需要几个月的时间。但是，如果您打算将两个完全不同的项目合并为一个，那么复杂性将需要它，特别是如果两个项目都没有经过测试。