vue 源码目录设计简述

学习vue.js的源码，首先要学习源码目录，vue.js的源码都在src目录下，目录结构如下：

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

1.compiler

compiler目录中主要存放编译相关的代码，比如说我们vue中定义的template的语法，浏览器是不识别的，所以在运行我们所写的代码前，需要将template模版中的语法解析成为浏览器可识别的代码。而这个过程就叫做编译。

2.core

这里主要放置vue.js的核心代码，包括内置组件、全局API、实例化、观察者、工具函数、虚拟dom等相关代码。结构如下图所示：

core
├── components      # 内置组件相关
├── global-api      # 全局组件相关
├── instance        # 实例化相关
├── observer        # 观察者相关
├── util            # 工具函数
├── vdom            # 虚拟dom

这里的代码是vue的核心，包括响应式原理、观察者模式、虚拟dom等你能听到的vue核心理念 基本都囊括在里面。

3.platform

vue.js是一个跨平台的框架，可以跑在web上，也可以配合weex跑在native客户端上，platform是Vue.js的入口，2个目录代表2个主要入口，分别打包成运行在web上和weex上的Vue.js。

platform
├── web             # web端
├── weex            # weex端

我主要做web端开发，重点关注web端渲染，也就是web菜单，vue实例化的入口文件也是在这个目录下。

4.server

Vue.js支持服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。注意：这部分代码是跑在服务端的 Node.js。

服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

做服务端渲染的话需要多多关注这里面的代码。

5.sfc

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

想了解.vue文件是如何解析的，需要好好分析这里面的代码。

6.shared

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

shared
├── constant.js     # 定义了一些全局需要用到的常量
├── util.js         # 共用的一些工具方法

知道目录的涉及结构就能更好的学习源码了，接下来一起学习吧！！！