Laravel 9 Vue 3 관성 프로젝트

Question

Vue.js 및 vite와 함께 Laravel을 사용하여 SPA를 구축하고 있으며 Laravel Breeze 및 Inertia js를 사용하는 또 다른 CMS 프로젝트가 있습니다. 이 두 프로젝트를 하나로 병합하려면 어떻게 해야 합니까? 따라서 라우팅을 통해 설정할 수 있는 관리 페이지와 같은 CMS가 있는 SPA 프로젝트를 가질 수 있습니다. 가능합니까?

이것은 내 CMS 프로젝트의 app.js입니다

가져오기 '../css/app.css';

'vue'에서 { createApp, h } 가져오기;
'@inertiajs/vue3'에서 { createInertiaApp }을 가져옵니다.
'laravel-vite-plugin/inertia-helpers'에서 {solvePageComponent }를 가져옵니다.
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

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

createInertiaApp({
    제목: (제목) => `${제목} - ${appName}`,
    해결: (이름) =>solvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ 엘, 앱, 소품, 플러그인 }) {
        return createApp({ 렌더링: () => h(App, props) })
            .use(플러그인)
            .use(ZiggyVue, Ziggy)
            .mount(엘);
    },
    진전: {
        색상: '#4B5563',
    },
});

이것은 내 SPA 프로젝트의 app.js입니다

가져오기 '../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';

'vue'에서 { createApp } 가져오기;
'./layouts/app.vue'에서 앱 가져오기;

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

페이지를 CMS에 복사해 보거나 그 반대로 복사해 보았지만 항상 오류가 발생합니다.

저는 초보자이고 관성을 사용하여 알아낼 수 없습니다. SPA 프로젝트에서 App.vue를 레이아웃으로 사용하여 다음과 같이 다른 페이지를 호출하고 있기 때문입니다.

    <홈/>
    <케나파/>
    <세리타/>
    <카리르/>
    <로원안/>
    <미디어/>
    <가붕/>
    <미트라/>
    <다운로드/>
    <바닥글/>
    
    
    <스크립트 설정 lang="ts">
    '../comComponents/Navbar.vue'에서 NavbarVue를 가져옵니다.
    '../page/Home.vue'에서 홈을 가져옵니다.
    '../pages/Media.vue'에서 미디어를 가져옵니다.
    '../pages/Kenapa.vue'에서 Kenapa를 가져옵니다.
    '../pages/Cerita.vue'에서 Cerita를 가져옵니다.
    '../pages/Lowongan.vue'에서 Lowongan을 가져옵니다.
    '../pages/Karir.vue'에서 Karir를 가져옵니다.
    '../pages/Gabung.vue'에서 Gabung을 가져옵니다.
    '../pages/Mitra.vue'에서 Mitra를 가져옵니다.
    import '../pages/Download.vue'에서 다운로드;
    '../comComponents/Footer.vue'에서 바닥글을 가져옵니다.
    
    
하지만 관성으로는 할 수 없습니다. 누가 가르쳐 주실 수 있나요? 
            

Answer 1

이전

새 Laravel 9 프로젝트를 생성하고 지침에 따라 Inertia nad Vue를 사용하여 Breeze를 설치하세요.

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

그런 다음 *.vue 파일을 새 프로젝트로 이동하고 적절하게 구문 분석합니다.

예를 들어 스파에서 Axios 호출을 통해 데이터를 얻을 수 있습니다. Inertia를 사용하면 컨트롤러에서 직접 데이터를 전달할 수 있습니다.

또한 컨트롤러 및 모든 관련 PHP 파일을 새 프로젝트로 가져와서 Inertia 디자인 구조와 일치하도록 구문 분석해야 합니다.

테스트

아직 수행하지 않았다면 PHPUnit으로 테스트를 시작하는 것이 좋습니다. 적절하게 테스트된 코드를 사용하면 한 저장소에서 다른 저장소로 파일을 마이그레이션하는 작업이 덜 번거로워집니다.

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

결론

전체적으로 이것은 아마도 몇 달이 걸릴 대규모 프로젝트가 될 것입니다. 그러나 완전히 다른 두 프로젝트를 하나로 병합하려는 경우 복잡성으로 인해 병합이 필요합니다. 특히 두 프로젝트 모두 테스트되지 않은 경우 더욱 그렇습니다.