laravel怎么安装inertia vue3的版本
这篇文章主要讲解了“laravel怎么安装inertia vue3的版本”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“laravel怎么安装inertia vue3的版本”吧！
一、安装前要求
1.1 已安装laravel框架
1.2 已安装Node JS
1.3 已安装Npm包管理工具
二、服务端配置
2.1 第一步poser安装inertia-laravel
$ poserrequireinertiajs/inertia-laravel
2.2 第二步：laravel目录resouces/views/新增app.blade.php文件，加入以下代码
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/><linkhref="{{mix('/css/app.css')}}"rel="stylesheet"/><scriptsrc="{{mix('/js/app.js')}}"defer></script></head><body>@inertia</body></html>2.3 第三步：执行artisan命令，添加中间件
$phpartisaninertia:middleware
文件生成后，手动添加到Kernel文件中的web中间件组最后一行
'web'=>[//...\App\Http\Middleware\HandleInertiaRequests::class,],
三、客户端配置
3.1第一步：使用npm命令安装前端框架依赖，安装VUE3版本。
$npminstall@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做出来的页面，浏览器不会刷新，为了用户感知增加了页面顶部进度条这种友好的提示[脑补一下]
$npminstall@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，清空并覆盖以下代码
constmix=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最新稳定版
$npminstallvue@next
第二步 添加.vue()到webpack.mix.js
constmix=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命令运行
$npmrunwatch
如果报错
解决：升级vue-loader，执行
$npmivue-loader
如果还报错
解决：resouces/js目录下新增Pages文件夹。
成功状态
感谢各位的阅读，以上就是“laravel怎么安装inertia vue3的版本”的内容了，经过本文的学习后，相信大家对laravel怎么安装inertia vue3的版本这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是主机评测网，小编将为大家推送更多相关知识点的文章，欢迎关注！
上一篇：PHP中Base64 、Blob与File相互转换的方法是什么
下一篇：微信小程序Echarts动态使用及图表层级踩坑解决的方法