laravel 프로젝트에서 vue 관성을 사용하는 방법은 무엇입니까?

2949 단어 laravelvueinertiainertia
Inertia 은 API를 빌드하지 않고 단일 페이지 앱을 빌드할 수 있는 작은 라이브러리입니다.

먼저 다음 명령을 사용하여 laravel 프로젝트를 만듭니다.
composer create-project --prefer-dist laravel/laravel inertia-app
또는 필요한 laravel 버전을 정의할 수 있습니다. 예를 들어 이 명령을 실행하여 laravel 8을 사용합니다.
composer create-project --prefer-dist laravel/laravel:8.6.11 inertia-app
관성을 위로 앉는 것은 두 단계로 나뉩니다.
  • 서버측
  • 클라이언트측

    • 1- 서버 측

    laravel 프로젝트를 생성한 후 다음 명령을 사용하여 inertia를 설치해야 합니다.
    composer require inertiajs/inertia-laravel
    이제 recourses\view\app.blade.php에 레이아웃 파일을 만들고 이 파일에 다음을 추가합니다.

    <!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href=”{{ mix(‘/css/app.css’) }}” rel=”stylesheet” />
<script src=”{{ mix(‘/js/app.js’) }}” defer></script>
@inertiaHead
</head>
<body>
@inertia
</body>
</html>


    그런 다음 다음 명령을 사용하여 관성 미들웨어를 생성해야 합니다.
    php artisan inertia:middleware
    다음을 추가하여 App\Http\Kernel에 미들웨어를 등록하는 것을 잊지 마십시오.

    ‘web’ => [
// …
\App\Http\Middleware\HandleInertiaRequests::class,
],



    2- 클라이언트 측

    먼저 다음 명령으로 종속성을 설치합니다.
    npm install @inertiajs/inertia @inertiajs/inertia-vue3
    두 번째 설치 vue.js:
    npm install vue@next
    [선택 사항 — 권장] vue 3을 사용하고 한 페이지에서 <template> , <scripts> 및 <styles> 를 사용할 수 있는 단일 파일 구성 요소(SFC)를 사용해야 하는 경우 다음 명령을 실행해야 합니다.
    npm install -D @vue/compiler-sfc
    이제 resources\js\app.js 파일에 다음 코드를 추가합니다.

    import { createApp, h } from ‘vue’
import { createInertiaApp } from ‘@inertiajs/inertia-vue3’
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})


    또한 resources\js\안에 Pages 폴더를 만드는 것을 잊지 마세요. 이 Page 폴더는 그 안에 .vue 파일을 만드는 데 사용됩니다.

    그런 다음 ( .vue(3) & .version() )을 추가하여 (webpack.mix.js)의 코드를 업데이트해야 합니다. 그러면 다음과 같이 됩니다.

    mix.js(‘resources/js/app.js’, ‘public/js’)
.vue(3)
.postCss(‘resources/css/app.css’, ‘public/css’, [
//
])
.version();


    이제 다음을 실행하여 나머지 종속성을 모두 설치합니다.
    npm install
    그런 다음 필요한 종속성을 가져오려면 다음 명령을 실행했습니다.
    npx mix
    npx mix를 다시 실행하라는 메시지가 표시될 수 있습니다.

    이제 npx mix를 실행하면 대신 Use — location=global을 사용하라는 오류가 발생할 수 있습니다.

    이 경우 다음 명령을 실행합니다.
    npm i vue-loader
    이제 npx mix를 다시 실행합니다:
    npx mix
    laravel 프로젝트에서 vue 관성을 설정하는 단계였습니다. 도움이 되었기를 바랍니다.
    【정식 릴리스】Visual Studio 2019의 인스톨·실행 방법【해설】
    🦓 정의되지 않은 속성이 없는 Infinite 객체를 어떻게 생성했습니까!? (개정)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage