3步轻松搞定vue--webpack项目环境搭建！

这里我们就不讲webpack的配置，而是直接通过脚手架工具搭建一个已经配置好基础打包功能的vue-webpack的项目。个别需求请自行配置。

对于已经对webpack有所了解的，可以直接使用，不太了解的建议先看看基础教程
入门：http://www.jianshu.com/p/42e11515c10f
阮一峰：https://github.com/ruanyf/webpack-demos#demo03-babel-loader-source

1.首先安装的脚手架工具，vue-cli。
vue-cli具有构建目录结构，本地调试、代码部署、热加载、单元测试等功能。具体安装方法参考https://github.com/vuejs/vue-cli
注：使用node安装，node版本最好在4以上

localhost:AmyLi$ node -v
v4.4.5
localhost:AmyLi$ npm install -g vue-cli
-

2.安装成功后，运行vue命令，提示用法：Usage: vue [options]，这里提供了3个命令，
Commands:
init generate a new project from a template
list list available official templates
help[cmd] display help for [cmd]

3.执行vue list命令，列出可以使用的模板列表。
这里我们使用webpack模板，然后执行vue init命令创建vue项目。

localhost:AmyLi$ vue init webpack xxx

? Project name xxx
? Project description 
? Author AmyLi <862*****@qq.com>
? Use ESLint to lint your code? Yes                  //ES6的代码风格检查器
? Pick an ESLint preset (Use arrow keys) Standard    //ESLint 预设的选项，一般用标准的就可以了
? Setup unit tests with Karma +Mocha? (Y/n) No       //项目单元测试的库
? Setup e2e tests with Nightwatch? No                //e2e 测试

   vue-cli   Generated  "xxx".
   To get started:
     
     cd sell
     npm install
     npm run dev
......
localhost:AmyLi$ cd xxx
localhost:AmyLi$ ls
README.md   config       package.json static 
buld        index.html   src
localhost:AmyLi$ npm install           //安装项目及相关基础配置
...//安装中
localhost:AmyLi$ npm run dev           //运行当前项目

本地sever运行，可本地直接访问，如localhost:8080。
目录构建以及相关基础配置就完成安装了。

webstorm中打开项目，查看目录。
可以看到如下：

vue-webpack项目目录.png

打开webpack.base.conf.js，可以看到基础打包配置已经设置好，如果需要修改或配置其它可直接在这个文件里修改。
其它配置文件均可以打开查看，做修改，且均为js文件，这里就不一一讲述每项配置的功能，请自行看基础教程进行设置。