Android程序员初探Vue（二）：项目结构
系列文章
Android程序员初探Vue（一）：环境搭建（Vue2.0）
Android程序员初探Vue（二）：项目结构
Android程序员初探Vue（三）：从开源项目看Vue架构
总体框架
作为 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 的字段。
想进一步了解 package.json 的可参考：https://docs.npmjs.com/files/package.json
index.html
其实 index.html 与 Android 根目录下面的 build.gradle 对比并不对，只是它们在 project 里面的位置很相近而已，index.html 是项目主页。
index.html
从图中可以看出，
index.html 的文件很简单。最开始看会有疑问：
<div id="app"> ？是什么鬼？为什么 body 里面就一行而我们运行项目却出来的很多图片和文字？
其实这个 id 里面的 app 对应
main.js声明的new Vue({el: '#app'})。
html 标签上面的字段都是小写，不能使用驼峰命名法，vue 自动将 App.vue 转换为 app 并且省去了后缀 .vue。
vue实例将 App.vue 挂载到 id=app 的节点上，从而实现将 App.vue 里的内容渲染在index.html 的 <div id="app"></div>里面。
这个很像我们在写 Android xml 布局的<include>标签。
但是网上大部分项目都是这么写的
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
项目了却怎么也找不到 routerView.vue。这个是 Vue 的一个路由插件，查看 main.js
main.js
通过红色圈的三部把 router 插件引入进去的。
<router-view></router-view> 这里就跳转到了 src/rounter/router.js 里面，这个 router.js里面就控制了整个项目的路由。
rounter 这个插件有点像 Android 里面的 Intent。
xx.vue
.vue 文件是 vue 特有的文件，也可以叫做组件，它是由前端三大块组成：HTML+JS+CSS，如下所示
App.vue
但是如果页面很复杂，如果 CSS 代码太长了，也可以把它单独抽取出来，以文件的方式引用，还可以在其他地方复用，如下所示：
<style lang="stylus" rel="stylesheet/stylus">
@import "food.styl";
</style>
注意几点
-
我们只需要关注：
- src
- index.html
- xx.vue
-
html 标签不能使用驼峰命名法，vue 会自动将驼峰转为小写：App.vue --> app，MyApp.vue --> my-app。
-
index.html是项目主页，也是项目主入口，里面代码很少。
END
传送门：
