vue-cli 脚手架总结
> 这一篇只解读了vue支持的webpack打包机的使用。之后会单独说webpack。
vue-cli是什么？
vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。
记住哦：快速建立项目，快速立项！快速立项！快速立项！(重要的事情有说三遍！！！)
那么什么是脚手架呢？官方是这么说的：
“脚手架”是一种元编程的方法，用于构建基于数据库的应用。许多MVC框架都有运用这种思想。程序员编写一份specification（规格说明书），来描述怎样去使用数据库；而由（脚手架的）编译器来根据这份specification生成相应的代码，进行增、删、改、查数据库的操作。我们把这种模式称为"脚手架"，在脚手架上面去更高效的建造出强大的应用！
接下来我们来看一张图：
就像是建楼一样，先搭架子，再填充建筑材料，至于什么材料，你自已决定。是小平房，还是楼房，还是什么其它大建筑，这要看你搭架子的结构了。
可以使用 vue list 命令来查看所有的官方模板列表。
目前可用的模板包括：
-
- browserify--全功能的Browserify + vueify，包括热加载，静态检测，单元测试
- browserify-simple--一个简易的Browserify + vueify，以便于快速开始。
- webpack--全功能的Webpack + vueify，包括热加载，静态检测，单元测试
- webpack-simple--一个简易的Webpack + vueify，以便于快速开始。
webpack-simple 和 webpack 的区别在于webpack-simple 没有包括Eslint 检查功能等等功能，普通项目基本用webpack-simple 就足够了.
vue-cli怎么使用？
首先，列出来我们需要的东西：
1,node.js环境（npm包管理器）,node.js中的npm包管理器提供了vue.js的模块包文件，用install安装命令可以从网络上下载vue.js的包文件。
2,这一项不是必须的，如果npm下载模块包时，网络不好，可以用cnpm来下载我们要下的模块包。
国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
cnpm install [name]
安装vue-cli之前，需要先安装了vue和webpack
npm install -g vue //全局安装vue
npm install -g webpack //全局安装webpack
npm install -g vue-cli //全局安装vue-cli
注意：上面这些装过一次之后都不需要再安装了。
接下来就可以开始vue-cli的使用了。
初始化vue模板项目命令：vue init [选择模板] [项目名]
vue init webpack myName //生成项目名为myName的模板，这里的项目名myName随你写，当不写时，就是在当前目录下释放资源。回车，回车，回车，注意这里看下面的图片，键入n,表示不要这些限制 cd myName //进入你创建的目录之后再进行下一步。 npm install //初始化安装依赖,若npm下不动时可用淘宝镜像cnpm来安装，两者的资源基本一致，有时也互补。
这样子项目就安装完了。生成的项目下面的目录是这样的：
我是在桌面直接手动创建了webpack0这个文件夹，将资源释放到了这里的(我没写myName)。
然后在执行: npm run dev
在浏览器打开http://localhost:8080，则可以看到欢迎页了
但是这个只能在本地跑（http://localhost:8080），要如何在我们自己的服务器上访问呢？此时需要执行
npm run build
会生成静态文件，在根目录的dist里，里面有个index.html，这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成
index.html里引用的css和js的引用路径不对，这时候就需要自己修改一下配置了。
进入config/index.js
在更改如图所示路径后，我们可以将生成的dist文件夹单独拿出来，在dist目录下运行：npm run dev ,结果不出所料，我们也可以以服务器的形式开启（http://localhost:8080）
这个效果与在网络服务器上效果一致。