vue.js webpack+vueCli环境搭建

vue.js官网

https://cn.vuejs.org/v2/guide/installation.html

1.安装

环境安装

安装vue环境
npm install vue
全局安装 vue-cli
npm install --global vue-cli

使用vue-cli创建一个基于webpack的项目

vue init webpack my-project
安装过程中会要求你填写项目名，作者，是否安装route等选项。按需选择。
安装相关配置包
npm install

如要对sass进行支持

npm install –save-dev node-sass
npm install –save-dev sass-loader

webpack相关插件（语法解析文件分解组合，）

npm install webpack@2.2.0-rc.2 webpack-dev-server@2.2.0-rc.0 html-webpack-plugin@2 html-loader css-loader style-loader file-loader url-loader extract-text-webpack-plugin --save-dev

2.项目配置

成功创建项目后，可以看到目录中有很多文件夹

build 是打包操作的相关设置
config 是基本设置目录
src 是项目代码源文件目录
static是静态资源目录
test是自动化测试目录

webpack部分可以查看博客目录中webpack配置的部分。
http://blog.csdn.net/lengyoumo/article/details/62886097

3.webpack打包操作

开启热更新开发模式
npm run dev
打包
npm run build
单元测试
npm run e2e(or test)

4.故障

!!vue-style-loader!css-loader?{“sourceMap”:false}!.
该故障是模版中使用scss 或sass导致。安装相应的loader即可解决，无需修改文件

npm i node-sass -D
npm i sass-loader -D

webpack.optimize.ModuleConcatenationPlugin is not a constructor

注释掉配置文件中的

TypeError: chunk.sortModules is not a function
这个问题是webpack3.0专有的。只要将插件回退版本就行了

npm i extract-text-webpack-plugin@2.1.2