laravel5.4+vue+vux+element的环境搭配

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

首先下载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项目下会多一个目录：

这个时候已经可以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的新文件，在里面配置：

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

保存，配置完成后在执行：

npm run watch

OK！

转载于:https://www.cnblogs.com/lishanlei/p/7488876.html

laravel5.4+vue+vux+element的环境搭配相关推荐

Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
用Docker搭建Laravel和Vue项目的开发环境
在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速.轻量级.不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境(开发环境的所有依赖都安装在Docker构建容器 ...
基于node.js开发环境下创建及开发vue.js项目的环境配置骤
基于node.js开发环境下创建开发vue.js项目的环境配置骤如下: 步骤一:安装node.js,安装完后运行node -v命令检安装node的查版本,判断是否安装成功.Npm是node.js包管理 ...
如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
Vue.js Element入门
作者 QQ群:852283276 微信:arm80x86 微信公众号:青儿创客基地 B站:主页 https://space.bilibili.com/208826118 参考 Element中文官网 ...
汇编程序开发环境搭配
引子由于这些日子一直都在研究底层的技术,从 Windows 驱动程序,到 Windows 内核等等技术的学习, 让我对底层的技术越发有兴趣了,而刚好,在研究 WRK 时, 对内存管理,寄存器,地址总 ...
Vue之element table 后端排序实现
Vue之element table 后端排序实现 1.如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段 ...
pycharm安装scrapy失败_Scrapy ——环境搭配与一个简单的例子
在我刚接触爬虫的时候就已经听过Scrapy大名了,据说是一个很厉害的爬虫框架,不过那个时候沉迷于Java爬虫.现在终于要来揭开它神秘的面纱了,来一起学习一下吧欢迎关注公众号:老白和他的爬虫 1.环境 ...
【转】体验 Silverlight 5 3D开发之环境搭配篇
体验 Silverlight 5 3D开发之环境搭配篇时间:2012-10-08 20:14来源:博客园作者:吉心点击:180次项目组现在要做一个三维的项目,我们几个童鞋,讨论了N久,最后决定基 ...

laravel5.4+vue+vux+element的环境搭配

laravel5.4+vue+vux+element的环境搭配相关推荐

最新文章

热门文章