Android程序员初探Vue(三):从开源项目看Vue架构

寻找项目

Android Studio 默认生成的 project,我们一般不会直接拿来用,会在做一些分包,对工程结构进行一定的修改。
同理,Vue 也是如此,所以说如果我们在项目中使用时,会对工程结构进行一定的重建。
那我们就从 Github 上找一个开源的 Vue Project 来看下他们的项目结构是怎么样的。

条件

由于我们刚入 Vue 没多久,项目必须有这几个条件:

  • 项目不复杂,简单易懂
  • 虽然简单,但是必须要包含日常开发中所需要的 vue 知识点和库
  • Star 的数量必须多,保证质量
  • 使用的是 vue 2.0
项目简介
Star 的数量.png

非常简单的一个vue2 + vuex的项目,整个流程一目了然,麻雀虽小,五脏俱全,适合作为入门练习。

非常符合我们的条件。

地址

vue2-happyfri

效果图

vue2-happyfri.gif

项目分析

项目结构

从上篇文章我们知道,我们只要重点关注:

  • src 目录
  • 根目录下的 index.html

根目录下的 index.html

index.html 里面除了一堆的 <meta> 标签外,就是配置了一个路由

    <div id="app">
        <router-view></router-view>
    </div>

router-view 是 Vue 的 路由库,官方文档解释如下:

对于大多数单页面应用,都推荐使用官方支持的 vue-router 库。更多细节可以看 vue-router 文档

PS:

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
From w3school

src 目录

src 目录才是我们的重点,该工程的主体结构如下:

  • components:由上面效果图可以看出,该项目主要由首页、内容页面、得分页面三个页面组成,对应于 - page 里面的三个页面,由于有很多相同的内容,所以抽取一个类似 BaseActivity 的通用页面出来,存放在 components文件夹下。
  • config :下面的是网络请求 ajax 的一些配置,可以忽略。
  • images :是一些本地图片,也可以忽略。
  • page:业务模块三个页面,分别是首页、答题页面、得分页面。
  • router:Vue 的全局路由统一管理。
  • store:vue 的统一状态存储,使用 Vuex
  • style:项目中统一 css 样式抽取。

跟脚手架自动生成的目录对比,多了个:

vue-router + Vuex

这个两个库也是 Vue 官方推荐我们在复杂一点的项目中使用的,就跟 Android 的 MVP 一样,最大的好处就是解耦。

END

vue 的官方文档是我见过写的最好的开发文档,基本看一遍官方文档,再看几个开源项目就可以模仿着开发 Vue了。
最后再附上一个不是很难又很实用的开源项目:

eleme

推荐阅读更多精彩内容