首先在大前提vue-cli已经安装好的情况下，并且
cnpm install后(官网使用的是npm，但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象)，这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具，对于刚接触的新手们建议关闭，不然代码写的不符合它的规范你的编译器会一直报错，如下图
安装好脚手架之后就像这样
终端输入
npm run dev，然后打开localhost:8080就可以看到项目运行啦
大致分析一下几个比较常用的文件把，如下图
1.build：主要用来配置构建项目以及webpack
2.config：项目开发配置
3.npm或者cnpm所下载的依赖包
4.你的源代码
5.静态文件夹，webpack打包时不会打包这里文件
6.最外层的页面一般title等都设置在这里
7.存放你要npm依赖包的json数据
大致介绍完项目结构，我们一起看看它页面的源码吧！
先从这个App.vue开始，这个文件仅此于外部的index意思就是index包含所有页面，而App.vue包含除了index的页面，也就是路由嵌套，后面会说到，在这里所创建的文件都是文件名.vue，页面的html格式就是一个template标签中包含一个div，相当于组件化的形式，而组件的内容写在这个div中（一个页面必须只有一个template包一个div，内容写在这个div中，不然会报错），而这个router-view标签就是当前页面下的子页面，可以理解成这个router-view是另一个页面，被当前页面所包含着，有点类似ifame标签的功能。
css，js格式
现在我们来看看HelloWorld.vue这个页面，这里js，css的代码放置格式它已经帮你写出来了，按照这种格式写就行了，需要提醒的就是style标签中的scoped属性，如果没写这条那么这个style的样式会影响到这个页面所有的子路由，如果加了那么这个样式只对当前页面起作用
看完页面我们看看路由的配置如下图
路由的路径在router下，刚开始打开会看到有报错，其实不是语法错误，是因为编译器默认编译es5的语法，而vue脚手架用的是es6的语法，我用的编译器是webStorm，只要设置一下就行了。
