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 相关文章推荐
phpMyadmin 用户权限中英对照
Apr 02 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
Dec 25 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
May 07 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
Jul 01 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
Oct 01 PHP
PHP网站开发中常用的8个小技巧
Feb 13 PHP
再推荐十款免费的php开发工具
Nov 09 PHP
PHP获取指定日期是星期几的实现方法
Nov 30 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
Mar 25 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
Jul 22 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
May 06 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
Jul 08 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
Python实现八大排序算法
2016/08/13 Python
pyshp创建shp点文件的方法
2018/12/31 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python Django路径配置实现过程解析
2020/11/05 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
关于打架的检讨书
2014/01/17 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
python多次执行绘制条形图
2022/04/20 Python