一、基本环境、工具安装
0、安装Node.js （因为这里主要是vue-cli用法的简介，所以node安装就不说了）1、cpm install -g cnpm --registry=https://registry.npm.taobao.org
//安装cnpm（淘宝镜像）
2、npm install webpack -g //安装webpack
3、npm install vue-cli -g //安装vue-cli
二、配置vue-cli
0、找一个文件夹来存放项目，我这里是‘vue-test’
2、cd project_name //进入项目文件夹
3、npm install //安装依赖
4、cnpm install vue-router vue-resource --save
检验是否安装成功，可以进入项目目录下，终端运行npm run dev，访问localhost:8080查看。（如果想要自动弹出，可以在config文件夹下的index.js中，设置：
autoOpenBrowser: true,
当然，如果想更改端口也是一样的方法：
port: 8888,
）
三、主要文件说明
0、src文件夹，存放源文件的目录，也就是我们写代码的地方（以下除了index.html都在此目录下）1、index.html主页入口，也就是路由的根目录的默认页面（一般不需要修改此文件）
2、main.js 可以理解为对应index.html的js文件
3、App.vue main.js中默认的组件（.vue的文件都是一个component），可以根据需要更改为自己的组件文件
4、router下的index.js 来配置路由的文件
5、assets 存放图片的地方
src：
四、路由
0、vue是构建单页面应用的框架，不同的路由可以看做是由多个组件所构成的页面（不同的路由页面可以使用相同的组件，提高了代码复用），所以，首先准备好需要的组件文件。1、在配置路由的index.js文件中引入所需的各个组件
例如： App import from '@/path/App' (此处的@是..，上一目录的意思)
2、在export default new Router({
//一个路由数组
routers: [
{
path: '/', //路由的路径，此处是根目录
name: '', //该目录下的名字（好像没啥用）
component: ComponentName //对应的组件，import引入的
},
…,
{}]
})
3、在访问不同URL时，你想让这些组件渲染在什么地方，就在这个地方添加 <router-view></router-view>（我这里以App.vue组件为例）：
这个标签就是路由组件渲染的地方。
4、最后的main.js中引入设置了router-view的组件，并挂载到主页的元素中。new Vue({el:'', router}), 或者 new Vue({router}).$mount('')
vue-cli就是把一个大型的应用，分成了多个组件。每个组件的样式、行为都分开，这样有利于维护和开发。我刚开始很不适应这种写法，感觉没有直接引入<script>标签来的简单，但是稍微用用就能体会到它的好处，更多关于Vue-cli和Vue-router的知识点：
vue-router中文教程