寻找项目
Android Studio 默认生成的 project,我们一般不会直接拿来用,会在做一些分包,对工程结构进行一定的修改。
同理,Vue 也是如此,所以说如果我们在项目中使用时,会对工程结构进行一定的重建。
那我们就从 Github 上找一个开源的 Vue Project 来看下他们的项目结构是怎么样的。
条件
由于我们刚入 Vue 没多久,项目必须有这几个条件:
- 项目不复杂,简单易懂
- 虽然简单,但是必须要包含日常开发中所需要的 vue 知识点和库
- Star 的数量必须多,保证质量
- 使用的是 vue 2.0
项目简介
非常简单的一个vue2 + vuex的项目,整个流程一目了然,麻雀虽小,五脏俱全,适合作为入门练习。
非常符合我们的条件。
地址
vue2-happyfri
效果图
项目分析
从上篇文章我们知道,我们只要重点关注:
- 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 官方推荐我们在复杂一点的项目中使用的,就跟 Android 的 MVP 一样,最大的好处就是解耦。
END
vue 的官方文档是我见过写的最好的开发文档,基本看一遍官方文档,再看几个开源项目就可以模仿着开发 Vue了。
最后再附上一个不是很难又很实用的开源项目:
eleme