之前发表过教导到家使用Laravel5.5+Vue的安装,但是后面发现修改组件内容确没有反应,仔细研究过发现原来vue组件或JS修改了 需要进行编译生成新的public/js/app.js才能修改内容,现在把经验分享给大家
工具/原料
1
电脑
2
网络
3
Laravel5.5版本
4
nodejs
一、安装扩展包
首先我们回顾一下Laravel安装Vue相关扩展包的过程:1.在package.json文件中添加相关的vue扩展包2.执行命令安装淘宝镜像 (npm自带的是国外镜像,容易卡顿,断线)npm install -g cnpm --registry=https://registry.npm.taobao.org3.cnpm install安装相关扩展包4.安装完成
二、使用教程
1
查看自带的vue示例内容,以下是文件位置1./resources/assets/js/app.js2./resources/assets/js/components/ExampleComponent.vue
2
打开浏览器访问一下页面,效果如图
3
修改组件内容,保存并刷新浏览器,发现页面并没有发生变化。
4
后来发现原来Laravel中的vue文件修改后,需要编译,重新生成public/js/app.js等文件 修改才能起作用。以下是Laravel5.5下的几个编译命令本地环境编译 npm run dev本地环境编译 + 监控文件修改 npm run watch生产环境编译 npm run prod
注意事项
1
遇到问题是切忌烦躁,要仔细寻找问题的根源,解决问题
2
Laravel各个版本编译命令有差异,具体请自己查询
3
本文使用的IDE编辑器是PHPstorm,npm安装了扩展包以后会出现node_modules文件夹,此时需要设置文件夹为excluded ,IDE内右键文件夹->Mark Dir As->Excluded ,不然会卡死