使用vue-cli 2.x+webpack构建Vue项目

使用vue-cli 2.x+webpack构建Vue项目，需要全局安装:

node.js

windows下，直接在官网下载安装包，运行安装就可以了。NPM是随同NodeJS一起安装的包管理工具。

webpack

 npm i webpack webpack-cli -g

vue-cli 2.x

npm install -g vue-cli

另外，可以全局安装一下eslint、cnpm和yarn

eslint

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

首先，安装 ESLint。

npm i -g eslint

然后，安装 Airbnb 语法规则，以及 import、a11y、react 插件。

npm i -g eslint-config-airbnb
npm i -g eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

yarn

npm install -g yarn

使用vue-cli 2.x+webpack构建Vue项目

vue init webpack vue-study

vue-study是自己起的创建的项目名称

运行这行命令以后，会有提示，按照提示输入和选择，一路回车就可以了

最后一个可以选择npm install 或yarn install 回车就会直接安装依赖包

依赖安装完成以后会有提示下一步：进入项目文件夹，运行npm run dev就可以了

生成的项目目录：

可以在package.json中配置一下"dev",增加一个 --open  ，可以在运行npm run dev 运行项目的时候，自动打开浏览器

"dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",

或是

将config/index.js文件中的autoOpenBrowser的值改为true，也可以在运行npm run dev 运行项目的时候，自动打开浏览器

- autoOpenBrowser: false,
+ autoOpenBrowser: true,