首頁 > 文章 > web前端 > laravel怎麼安裝inertia vue3的版本

laravel怎麼安裝inertia vue3的版本

WBOY轉載: 2023-05-15 10:31:051067瀏覽

一、安裝前需求

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(&#39;/css/app.css&#39;) }}" rel="stylesheet"/>
        <script src="{{ mix(&#39;/js/app.js&#39;) }}" defer></script>
    </head>
    <body>
        @inertia    </body></html>

2.3 第三步驟：執行artisan指令，新增中間件

$ php artisan inertia:middleware

檔案產生後，手動新增到Kernel檔案中的web中間件組最後一行

&#39;web&#39; => [
    // ...
    \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 &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;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 &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;import { InertiaProgress } from &#39;@inertiajs/progress&#39;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(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

四、安裝VUE

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

$ npm install vue@next

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

const mix = require(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .vue()
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

第三步透過npm指令執行