总体框架
作为 Android 开发者，我们最开始学习 Android 时第一件事就是分析 IDE 自动生成的 project 项目结构，掌握每一个文件是做什么用的，学习 Vue 也是如此。
用 Sublime 打开我们刚才创建的项目 my-project 后，Sublime 左侧栏展示出的项目结构跟 Android Studio 生成的很相近。
借用一张网上的图片来具体解释下工程里各个文件的含义：
vue-cli项目总体结构
Android 与 vue 工程对比
我们写 Android 时基本都只要操作 src 目录，同理 Vue 也是一样，但是很少的时候我们也要去修改根目录下面的 build.gradle 文件，对应着 vue 里面的 index.html，其他自动生成的文件或者文件夹看名字也基本能明白。
Android 与 vue 工程对比
我们再来详细对比下：
node_modules vs External Libraries
先看下 node_modules 的截图：
node_modules
这个目录下存放的是该 project 下所有的依赖包，就跟 Android Studio 的 External Libraries 一样。
package.json vs build.gradle
package.json 是一个包管理的配置文件，跟 build.gradle 一样，里面的参数是整个项目的配置。
package.json
其中 scripts 对象里面的 dev：指开发运行(npm run dev)，build 指的是正式运行(npm run build)，对应于 Android 打包 apk 时的 debug 和 release。
dependencies 字段指定了项目运行时所依赖的模块，devDependencies 字段指定了项目开发时所依赖的模块。在命令行中运行 npm install 命令，会自动安装 dependencies 和 devDependencies 字段中的模块。
例如：
npm install vuex
运行完这个指令后， dependencies 和 devDependencies 字段中会多出一个 vuex 的字段。
index.html
其实 index.html 与 Android 根目录下面的 build.gradle 对比并不对，只是它们在 project 里面的位置很相近而已，index.html 是项目主页。
index.html
从图中可以看出，index.html 的文件很简单。
最开始看会有疑问：
其实这个 id 里面的 app 对应 main.js 声明的new Vue({el: '#app'})。
html 标签上面的字段都是小写，不能使用驼峰命名法，vue 自动将 App.vue 转换为 app 并且省去了后缀 .vue。
vue实例将 App.vue 挂载到 id=app 的节点上，从而实现将 App.vue 里的内容渲染在 index.html 的
这个很像我们在写 Android xml 布局的 标签。
但是网上大部分项目都是这么写的
项目了却怎么也找不到 routerView.vue。这个是 Vue 的一个路由插件，查看 main.js
main.js
通过红色圈的三部把 router 插件引入进去的。
这里就跳转到了 src/rounter/router.js 里面，这个 router.js
里面就控制了整个项目的路由。
rounter 这个插件有点像 Android 里面的 Intent。
xx.vue
.vue 文件是 vue 特有的文件，也可以叫做组件，它是由前端三大块组成：HTML+JS+CSS，如下所示
App.vue
但是如果页面很复杂，如果 CSS 代码太长了，也可以把它单独抽取出来，以文件的方式引用，还可以在其他地方复用，如下所示：
@import "food.styl";
注意几点
我们只需要关注：
src
index.html
xx.vue
html 标签不能使用驼峰命名法，vue 会自动将驼峰转为小写：App.vue --> app，MyApp.vue --> my-app。
index.html 是项目主页，也是项目主入口，里面代码很少。
END
