寻找项目
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 官方推荐我们在复杂一点的项目中使用的，就跟 Android 的 MVP 一样，最大的好处就是解耦。
END
vue 的官方文档是我见过写的最好的开发文档，基本看一遍官方文档，再看几个开源项目就可以模仿着开发 Vue了。
最后再附上一个不是很难又很实用的开源项目：
eleme
