摸了一天的Vue-cli脚手架，终于有点明白怎么用脚手架搭建vue项目，并运用到现有的项目中。为想上手Vue的小白们少走弯路，在这总结一下。
在搭建Vue项目之前，先确保基础环境的准备，需要有nodejs和npm，没有的话先安装nodejs，nodejs里已经含有了npm，npm是nodejs的包资源管理器。因为npm官网是国外的，下载依赖模块时是非常慢的，所以有好心的淘宝团队开发了淘宝镜像cnpm，使用命令跟npm一样的，下载速度很快。相关安装大家可以自行上网搜索下。
有了npm后，我们就可以安装vue-cli了，我用的是cnpm，命令如下：cnpm install vue-cli -g，全局安装。有了脚手架后，我们就可以搭建vue项目了：
一，使用命令：vue init webpack xxx 搭建vue项目，其中xxx是你的项目名称
最后出现finished字样，说明已经创建完成，我们看下创建出来的目录结构
其他大家可以先不用管，一些打包配置和依赖模块。我们主要是在src目录下工作，
Vue项目创建好之后这三个文件是我们需要关注的：index.html 、main.js 、App.js。
index.html这个是页面，用这页面是用来绑定vue容器元素，main.js是入口，如下：
前三名是导入相关模块；
Vue.config.productionTip = false是一个生产提示开关，大家可上网查下其作用
第10行是创建一个Vue实例，
第11行为绑定实例的HTML容器ID，
第12行注册router实例，这样就可以使用路由了，
第13行表示指定使用哪些组件
第14行表示使用模版
二，在项目中做自己的开发后，使用命令：npm run dev 运行项目，表示在开始环境启动，修改源代码时可以实现在运行的页面上反应出来
现在我们可以按提示打开项目看看下
三，使用命令：npm run build 打包
在打包前修改一下打包参数：
修改46行，原先是'/'，修改成'./'相对路径，不然打包时找不到资源；
修改52行，我们资源不使用map映射，这个看个人情况。
修改完后运行命令：
至此打包成功，我们打开dist目录看下打包后是什么样子，
是这个样子的，static是我们的一些静态资源，js，css，图片等。这些和我们普通创建的web项目是一样的，npm对我们的资源进行了打包和压缩，页面对vue的引用也是和引用普通js一样，js是把里面import进来的模块打包成一个。感觉vue-cli这个脚手架让我们的开发模式从以前的混合开发转化成模块开发，对模块更加清晰，更利于项目的封装和重用，对项目资源的打包发布也有很大的帮助。