其实就是一个“脚手架”，使用它，可以快速地搭建一个完整地Vue应用。他它的作用就是用来自动一键生成 vue + webpack 的项目模板，包括依赖库。免去了我们手动安装各种插件，各种引入的问题。
打开控制台，输入 cnpm i vue-cli -g
安装 Vue CLI ，尚未安装cnpm的可以输入 npm i cnpm -g --registry=https://registry.npm.taobao.org 用来安装国内淘宝镜像源的 cnpm
在命令执行结束后，输入 vue --version 如果控制台打印出版本号，即表示安装成功
在项目所要放置的文件目录下打开控制台，输入： vue init webpack project-name 初始化项目（此处的project-name为你自己的项目名称）
在模板下载完成后， Vue CLI 将引导我们进行项目配置，我的配置如下。 其中，“Set up unit tests”和“Setup e2e tests with Nightwatch”选择 No ，最后一项也选择 No，是因为npm的镜像源在国外，安装依赖的速度缓慢且易出错，建议使用cnpm安装。
输入 cnpm install 安装项目依赖
输入 npm start 构建项目的开发版本，并启动 webpack-dev-server
输入 npm run build 构建项目的生产版本
使用 webpack-dev-server命令，我们可以启动web服务器并实时更新我们的修改
对于Vue CLI 项目初始目录的详解可以参考此博客 Vue CLI项目目录详解
基于 Vue-CLI 项目的搭建和解析 自己的项目文件都需要放到 src 文件夹下，项目开发完成之后，可以输入 npm run build 来进行打包工作。打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。项目上线时，只需要将 dist 文件夹放到服务器就行了。
index.html（主页） index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充
main.js（入口文件） main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例。 1）router就是设置路由器 2）template:""就是设置#app的模板为 3）components:{App}就是引入的根组件App.vue 后期还可以引入插件，当然首先得安装插件。
App.vue（根组件） 一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)
router/index.js（路由配置） 这里定义了路径为’/‘的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件。 类似的，我们可以设置多个路由，‘/index’,’/list’之类的，当然首先得引入该组件，再为该组件设置路由。
当我们执行 npm run dev 后，在浏览器输入localhost:8080/，会看到以下界面，表示我们一个基本的配置完成。这里的“商城首页”信息是属于index.vue组件的。
如何搭建一个vue项目 参考 https://www.cnblogs.com/haitaoli/p/10304193.html
