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

传送门：

Android程序员初探Vue（三）：从开源项目看Vue架构

最后编辑于：2018.02.08 15:36:42