laravel安裝inertia vue3的版本

赤三禾發表於2021-12-21

一、安裝前要求

1.1 已安裝laravel框架
1.2 已安裝Node JS
1.3 已安裝Npm包管理工具

二、服務端配置

2.1 第一步:composer安裝inertia-laravel

$ composer require inertiajs/inertia-laravel

2.2 第二步:laravel目錄resouces/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>

2.3 第三步:執行artisan命令,新增中介軟體

$ php artisan inertia:middleware

檔案生成後,手動新增到Kernel檔案中的web中介軟體組最後一行

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

三、客戶端配置

3.1第一步:使用npm命令安裝前端框架依賴,安裝VUE3版本。

$ npm install @inertiajs/inertia @inertiajs/inertia-vue3

3.2第二步:初始化應用
開啟/resouces/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)
  },
})

3.3第三步:npm安裝進度條包
使用inertia做出來的頁面,瀏覽器不會重新整理,為了使用者感知增加了頁面頂部進度條這種友好的提示[腦補一下]

$ npm install @inertiajs/progress

安裝完成後,引入並初始化,開啟/resouces/js/app.js,清空後覆蓋以下程式碼

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'

createInertiaApp({
    resolve: name => import(`./Pages/${name}`),
    setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })
            .use(plugin)
            .mount(el)
    },
})

InertiaProgress.init()

3.4 第四步 使用以下 webpack 配置來強制瀏覽器在檔案更新後,載入新的資源,而不是使用快取。
開啟webpack.mix.js,清空並覆蓋以下程式碼

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].js?id=[chunkhash]',
    }
});

四、安裝VUE

第一步 使用npm命令安裝vue最新穩定版

$ npm install vue@next

第二步 新增.vue()到webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].js?id=[chunkhash]',
    }
});

第三步通過npm命令執行

$ npm run watch

如果報錯

laravel8安裝inertia vue3的版本
解決:升級vue-loader,執行

$ npm i vue-loader

如果還報錯

laravel8安裝inertia vue3的版本
解決:resouces/js目錄下新增Pages資料夾。

成功狀態

laravel8安裝inertia vue3的版本

本文安裝參考
inertia.js中文文件

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

相關文章