手動從零開始構建Laravel8+Inertiajs+Vue3專案

ztlcoder發表於2021-08-24
LaravelJSVue

原文釋出在我的部落格：從零搭建 Laravel8 + Inertiajs + Vue3
Inertiajs 中文文件翻譯工作已經完成，文件地址：Inertiajs中文文件

官方文件中沒有說明如何在 Laravel8 中開始正確使用 Inertiajs 初始化一個專案，我在谷歌也找了很多文章，沒有找到說的很清楚的，基本都是把文件中伺服器端和客戶端的手冊複製了一遍。自己摸索了一下，遇到了一些問題都解決了，最終搭建成功，把過程記錄一下，以供參考。

伺服器端配置

初始化 Laravel 專案
laravel new laravel

cd laravel
安裝 inertia-laravel
composer require inertiajs/inertia-laravel
建立根模板

在 reources/views 下建立 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>
  </head>
  <body>
    @inertia
  </body>
</html>
設定中介軟體
php artisan inertia:middleware

生成中介軟體後，在 App\Http\Kernel 中註冊 HandleInertiaRequests 中介軟體，作為 web 中介軟體組中的最後一項。

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],
建立控制器
php artisan make:controller HomeController

HomeController 內容如下。

namespace App\Http\Controllers;

use Inertia\Inertia;

class HomeController extends Controller
{
    public function index()
    {
        return Inertia::render('Home');
    }
}
建立頁面

新增頁面 resources/js/Pages/Home.vue。

<template>
    <div>hello world</div>
</template>

<script>
export default {
    name: 'Home'
}
</script>
設定路由
use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index']);

客戶端配置

安裝前端依賴
npm install
安裝必要的外掛
安裝 vue3
npm install vue@next
安裝 inertia-vue3 介面卡
npm install @inertiajs/inertia @inertiajs/inertia-vue3
安裝 @vue/compiler-sfc 和 vue-loader
npm install @vue/compiler-sfc vue-loader@^16.2.0 --save-dev --legacy-peer-deps
如果需要進度指示器，則安裝 @inertiajs/progress
npm install @inertiajs/progress
修改 webpack.mix.js，新增 vue() 方法
mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
修改 resources/app.js
require('./bootstrap')

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress' // 如果需要進度指示器

InertiaProgress.init() // 如果需要進度指示器

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})
執行編譯
npm run dev

完美！經典的“hello world”可以正確地顯示在瀏覽器上了。關於 laravel-mix 的使用方式，請參考官方文件

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章