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 命令,会自动安装 dependenciesdevDependencies 字段中的模块。
例如:
npm install vuex
运行完这个指令后, dependenciesdevDependencies 字段中会多出一个 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架构