Vue源码系列2------认识Vue源码目录

Vue.js的源码全部开源在github上，我们可以从github上克隆到本地，项目地址--https://github.com/vuejs/vue；以便于研究。

Vue.js 的项目源码都在 src 目录下，其目录结构如下。

src├── compiler        # 编译相关 ├── core            # 核心代码 ├── platforms       # 不同平台的支持├── server          # 服务端渲染├── sfc             # .vue 文件解析├── shared          # 共享代码

下面我们逐一来看这些子目录：

compiler------编译相关

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树【抽象语法树】，ast 语法树优化，代码生成等功能。

编译的工作可以在构建时做（借助 webpack、vue-loader 等辅助插件）；也可以在运行时做，使用包含构建功能的 Vue.js。因为编译是一项耗性能的工作，所以更推荐前者——离线编译。

core-----核心代码

core 目录包含了 Vue.js 的核心代码，包括内置组件、全局 API 封装，Vue 实例化、观察者、虚拟 DOM、工具函数等等。

这里的代码可谓是 Vue.js 的灵魂，也是我们之后需要重点分析的地方。

components:内置组件

global-api:global API相关

instance:渲染辅助函数（事件、初始化、生命周期....）

observer:响应式数据相关（Vue的核心概念）

util:工具

vdom：虚拟树

platform-----不同平台的支持

Vue.js 是一个跨平台的 MVVM 框架，它可以跑在 web 上，也可以配合 weex【类似于react native的跨端应用】 跑在 natvie 客户端上。platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。

server------服务端渲染相关

Vue.js 2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。注意：这部分代码是跑在服务端的 Node.js，不要和跑在浏览器端的 Vue.js 混为一谈。服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

sfc-------.Vue文件解析

通常我们开发 Vue.js 都会借助 webpack 构建， 然后通过 .vue 单文件的编写组件。这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。

shared------共享代码

Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。

 

整个Vue的核心代码按照功能模块严格分割开来，利于学习和阅读。这点设计思想也可用于日常的代码设计中，利于提高代码的可维护性和可阅读性