欧美日韩精品久久免费,日韩亚洲欧美久久久www综合网,国产精品一区二区久久不卡

下面由laravel教程欄目給大家介紹laravel如何安裝inertia vue3的版本，希望對(duì)大家有所幫助！

一、安裝前要求

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

二、服務(wù)端配置

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 第三步：執(zhí)行artisan命令，添加中間件

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

$ php artisan inertia:middleware

文件生成后，手動(dòng)添加到Kernel文件中的web中間件組最后一行

'web' => [     // ...     AppHttpMiddlewareHandleInertiaRequests::class,],

三、客戶(hù)端配置

3.1第一步：使用npm命令安裝前端框架依賴(lài)，安裝VUE3版本。

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

3.2第二步：初始化應(yīng)用
打開(kāi)/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安裝進(jìn)度條包
? 使用inertia做出來(lái)的頁(yè)面，瀏覽器不會(huì)刷新，為了用戶(hù)感知增加了頁(yè)面頂部進(jìn)度條這種友好的提示[腦補(bǔ)一下]

$ npm install @inertiajs/progress

安裝完成后，引入并初始化，打開(kāi)/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 配置來(lái)強(qiáng)制瀏覽器在文件更新后，加載新的資源，而不是使用緩存。
打開(kāi)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最新穩(wěn)定版

$ 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]',     }});

第三步通過(guò)npm命令運(yùn)行