laravel 5.4 + vue + vux + element的环境搭配过程介绍


Posted in PHP onApril 26, 2018

前言

最近因为项目的需要,需要搭配一个这样的环境。之前做过的东西没有这样用过,在网上找了半天不是过于简单就是根本行不通,自己踩了半天的坑,终于搭配成功。

过程如下

首先下载laravel5.4,直接去官网一键安装包或者composer或者脚手架下载都行,总之,现在laravel环境可以访问。

打开laravel中的package.json文件:

"private": true,
 "scripts": {
 "dev": "npm run development",
 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 "watch-poll": "npm run watch -- --watch-poll",
 "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
 "prod": "npm run production",
 "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
 },
 "devDependencies": {
 "axios": "^0.15.3",
 "bootstrap-sass": "^3.3.7",
 "cross-env": "^3.2.3",
 "jquery": "^3.1.1",
 "laravel-mix": "0.*",
 "lodash": "^4.17.4",
 "vue": "^2.1.10"
 }
}

将其红色的部分修改为:

"devDependencies": {
 "axios": "^0.15.3",
 "bootstrap-sass": "^3.3.7",
 "jquery": "^3.1.1",
 "laravel-mix": "^0.8.3",
 "cross-env": "^3.2.3",
 "lodash": "^4.17.4",
 "vue": "^2.1.10",
 "element-ui": "^1.2.8",
 "vue-loader": "^11.3.4",
 "vue-router": "^2.4.0"
}

之后终端进入项目根目录,运行

cnpm install

如果没有淘宝镜像,可以:

npm install //注意:(window下运行这个命令时要带上--no-bin-links)。

有一点要注意,在上面package.json文件中配置各依赖库时要根据具体版本自行修改,否则也会踩到很多坑(不要问我为什么知道!~)

之后我们可以发现laravel项目下会多一个目录:

 laravel 5.4 + vue + vux + element的环境搭配过程介绍

这个时候已经可以npm run dev了,不过还是laravel自带的页面。

到目前为止,我们已经配置了vue,vue-loader,vue-router,element-ui了,现在是时候安装vux了!

cd到项目的根目录中,我们需要vue-cli脚手架,如果还没有装:

npm install vue-cli -g / cnpm install vue-cli -g

之后装vux:

npm install vux --save

嗯,其实也挺快的~~

因为vux2需要以来vux-loader使用,所以我们还要装vux-loader:

npm install vux-loader --save

安装less-loader以正确编译less源码:

npm install less less-loader ?-save

OK,安装成功后sell进入项目根目录,创建一个名为webpack.config.js的新文件,在里面配置:

laravel 5.4 + vue + vux + element的环境搭配过程介绍

再打开根目录下的package.json修改—config 指向的文件,指向到你现在的这个webpack.config.js文件:

laravel 5.4 + vue + vux + element的环境搭配过程介绍

保存,配置完成后在执行:

npm run watch

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

PHP 相关文章推荐
PHP 中的批处理的实现
Jun 14 PHP
说明的比较细的php 正则学习实例
Jul 30 PHP
PHP Stream_*系列函数
Aug 01 PHP
php 求质素(素数) 的实现代码
Apr 12 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
Jun 12 PHP
php多任务程序实例解析
Jul 19 PHP
php使用指定编码导出mysql数据到csv文件的方法
Mar 31 PHP
PHP实现二维数组去重功能示例
Jan 12 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
Mar 28 PHP
php str_replace替换指定次数的方法详解
May 05 PHP
PHP swoole和redis异步任务实现方法分析
Aug 12 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
Jul 13 PHP
PHP分享图片的生成方法
Apr 25 #PHP
PHP receiveMail实现收邮件功能
Apr 25 #PHP
laravel中短信发送验证码的实现方法
Apr 25 #PHP
PHP设计模式之适配器模式原理与用法分析
Apr 25 #PHP
PHP设计模式之原型设计模式原理与用法分析
Apr 25 #PHP
PHP设计模式之单例模式原理与实现方法分析
Apr 25 #PHP
PHP设计模式之工厂方法设计模式实例分析
Apr 25 #PHP
You might like
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php学习笔记之基础知识
2014/11/08 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python类及获取对象属性方法解析
2020/06/15 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
无工作经验者个人求职信范文
2013/12/22 职场文书
市场安全管理制度
2014/01/26 职场文书
军人违纪检讨书
2014/02/04 职场文书
普通话宣传标语
2014/06/26 职场文书
阿甘正传观后感
2015/06/01 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
工伤调解协议书
2016/03/21 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
python通过新建环境安装tfx的问题
2022/05/20 Python