Vue CLI 앱과 Laravel 및 Inertia.js 통합

10281 단어 inertiajsvuespalaravel

Inertia.js 란 무엇입니까?



Inertia.js은 Laravel 및 Rails과 같은 백엔드 프레임워크를 React, Vue 및 Svelte과 같은 최신 프론트엔드 프레임워크와 통합하고 백엔드 API나 클라이언트 측 라우터 없이 SPA를 구축하기 위해 개발되었습니다. 저는 이 프로젝트의 팬이 되었고 Vue.js와 함께 사용하고 있습니다.

그럼에도 불구하고 이 튜토리얼이 필요한 이유는 무엇입니까?



이제 Inertia's client-side setup page 의 지침을 맹목적으로 따르면 Code Splitting 을 사용하여 활성화된 Laravel Mix 설치만 다룹니다. 저는 Jeffrey Way(Laravel Mix의 저자) 팬이지만 - 여전히 Laracasts 구독 중이며 그는 플랫폼을 배우고 있습니다 - 그리고 Laravel Mix의 의도를 이해합니다. 사용하면 Webpack 구성과 씨름하고 문제가 여러 구식 종속성 및 이와 유사한 것으로 귀결된다는 사실을 발견하면서 며칠을 낭비하고 있음을 빨리 알게 될 것입니다(예, 그 경험이 있습니다).

반면 Vue CLI은 항상 내 삶을 편하게 만들어주었다. 나는 그것에 대해 나쁘게 말할 것이 전혀 없습니다. 모든 것이 항상 예상대로 작동합니다(적어도 지금까지는 적어도 저에게는).

그래서 Vue CLI 앱과 함께 Inertia.js를 사용하고 싶었습니다.

주의



이제 이 문서는 짧고 쉬울 것입니다. 하지만 이는 의 미리 보기 문서에서 이미 무거운 작업을 수행했기 때문입니다. 그것을 놓친 경우 라우팅 섹션에 도달할 때까지 해당 단계를 따르십시오. 원하는 경우 해당 섹션을 자유롭게 읽으십시오. 그러나 이 자습서의 요구 사항은 아닙니다.

클라이언트 측 설정



Vue.js용 Inertia.js 어댑터 설치:

cd resources
npm install @inertiajs/inertia @inertiajs/inertia-vue
cd ../

resources/src/pages에서 페이지 구성 요소를 만듭니다.

mkdir resources/src/pages
nano resources/src/pages/Home.vue




// resources/src/pages/Home.vue

<template>
  <h1>Hello from Home</h1>
</template>

<script>
export default {}
</script>


Inertia App 구성 요소를 사용하고 적절한 디렉터리에서 페이지 구성 요소를 로드하도록 main.js 파일을 편집합니다.

// resources/src/main.js

import Vue from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue'

Vue.config.productionTip = false

Vue.use(plugin)

const el = document.getElementById('app')

new Vue({
  render: h => h(App, {
    props: {
      initialPage: JSON.parse(el.dataset.page),
      resolveComponent: name => import('@/pages/' + name + '.vue').then(module => module.default)
    }
  })
}).$mount(el)

resources/src/template.blade.php를 <div id="app"></div> Blade 지시문으로 대체하여 @inertia 편집:

<!-- ... -->
<body>
  <!-- ... -->
  @inertia
  <!-- built files will be auto injected -->
</body>


서버 측 설정



Inertia의 서버 측 어댑터를 설치합니다.

composer require inertiajs/inertia-laravel


Inertia 미들웨어 게시 및 등록:

php artisan inertia:middleware




// app/Http/Kernel.php

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],


config file on the official repo의 내용을 기반으로 관성에 대한 구성 파일을 만들고 page_paths 적절하게 설정합니다.

nano config/inertia.php




// config/inertia.php

return [

    /*
    |--------------------------------------------------------------------------
    | Inertia
    |--------------------------------------------------------------------------
    |
    | The values described here are used to locate Inertia components on the
    | filesystem. For instance, when using `assertInertia`, the assertion
    | attempts to locate the component as a file relative to any of the
    | paths AND with any of the extensions specified here.
    |
    */

    'testing' => [      
        'ensure_pages_exist' => true,
        'page_paths' => [
            resource_path('src/pages'),
        ],
        'page_extensions' => [
            'js',
            'svelte',
            'ts',
            'vue',
        ],
    ],
];


경로를 설정하고 이동하면 됩니다.




// routes/web.php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});


그리고 그게 다야!

기사 리포지토리



나는 당신이 복제하고 스스로 작동하는 것을 볼 수 있도록 GitHub repo with all of this work done을 만들었습니다.

DON'T FORGET TO CREATE YOUR resources/.env.local FILE AND SET THE VUE_APP_ASSET_URL ENVIRONMENT VARIABLE



결론



보시다시피 Inertia.js를 사용하기 위해 Laravel Mix에 묶여 있지 않습니다. 약간의 노력으로 Vue CLI 앱과 함께 Inertia.js를 사용할 수 있습니다.

IMO, 이것은 거의 14년 동안 웹 개발 작업을 해본 적이 있는 최고의 설정입니다. 어떻게 생각해? 저만큼 즐기시기 바랍니다. 건배!
PAT (Advanced Level) Practise 1009 Product of Polynomials (25)
[Codility/Time Complexity] TapeEquilibrium

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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