【vue源码解读 篇幅一】准备工作02 - Vue.js源码目录设计

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的灵魂，也是我们之后需要重点分析的地方。

platform

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

• 我们会重点分析web入口打包后的Vue.js，对于weex入口打包的Vue.js，感兴趣的同学可以自行研究。

server

• Vue.js2.0支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。注意：这部分代码是跑在服务端的Node.js，不要和跑在浏览器端的Vue.js混为一谈。

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

sfc

• 通常我们开发Vue.js都会借助webpack构建，然后通过.vue单文件编写组件。

• 这个目录下的代码逻辑会把.vue文件解析成一个JavaScript的对象。

shared

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

• 这样的目录设计让代码的阅读性和可维护性都变强，是非常值得学习和推敲的。