搭建vue-cli项目和打包项目

vue-list 可以查看vue所有的组件；

选用模板常用的是webpack与webpack-simple。webpack-simple是基于进行配置的版本，而webpack模板则是基于Webpack ^1.3.2配置的。

其中，最大的区别是webpack-simple没有vue-router的中间件，不需要路由时推荐使用；

同时webpack-simple没有格式的检测。（个人认为不太重要），

使用webpack模板时格式检测也是可以不选的。

安装webpack-simple

第一步

npm install -g vue-cli  g(全局环境)  安装vue-cli；

安装完成后；

vue init webpack-simple 项目的名称

这样一个vue-cli项目就创建成功了

然后当我们使用vue-cli脚手架完成一个项目的时候，我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来，

但是现在我们要把他放到服务器上的话用npm run build命令进行项目打包就可以啦。

打包的过程:

命令行执行npm run build命令，命令需要在项目目录下执行；

打包完成后会在项目中生成dist文件夹；其中里面的Index.html就是入口文件；

当你直接打开Index.html的时候就会报以下错误:

这是因为引用资源的路径问题，我们只要在下图的地方修改一下再打包就可以了。

一般情况router开启了history模式，如果是本地打包后访问的话，是没有问题的，

但是一旦部署到服务器上面，还需要在服务端进行配置修改，在index.js中去除掉history模式。