一文详解laravel如何安装inertia vue3的版本

2022-05-15 0 548

下面由Laravel教程栏目给大家介绍laravel如何安装inertia vue3的版本,希望对大家有所帮助!

一、安装前要求

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

如果报错

一文详解laravel如何安装inertia vue3的版本

解决:升级vue-loader,执行

$ npm i vue-loader

如果还报错

一文详解laravel如何安装inertia vue3的版本

解决:resouces/js目录下新增Pages文件夹。

成功状态

一文详解laravel如何安装inertia vue3的版本

推荐学习:《laravel视频教程

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

【声明:根据2013年1月30日《计算机软件保护条例》2次修订第17条规定: 为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存 储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬! 鉴于此,也希望大家按此说明研究软件!】
本站所有源码尽量保证原汁原味,如有特殊情况会作出声明及标注,网站资源不做任何二次加密(原版加密除外,不影响程序使用的不会做解密处理),方便您更好的学习参考。 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

即刻码站__国内靠谱的站长资源下载平台 php教程 一文详解laravel如何安装inertia vue3的版本 https://www.jike1995.com/37031.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务