寻找项目

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