一篇平平无奇又低调实用的Vue.js源码开发技巧

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

01 compiler

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

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

02 core

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

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

03 platform

Vue.js 是一个跨平台的 MVVM 框架，它能够跑在 web 上，也能够配合 weex 跑在 natvie 客户端上。platform 是 Vue.js 的入口，2 个目录表明 2 个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。

咱们会重点分析 web 入口打包后的 Vue.js，对于 weex 入口打包的 Vue.js，感兴趣的同窗能够自行研究。

04 server

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

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

05 sfc

一般咱们开发 Vue.js 都会借助 webpack 构建， 而后经过 .vue 单文件的编写组件。

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

06 shared

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

总结

从 Vue.js 的目录设计能够看到，做者把功能模块拆分的很是清楚，相关的逻辑放在一个独立的目录下维护，而且把复用的代码也抽成一个独立目录。

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

关于vue.js还有不少须要一块儿学习和探讨的地方，欢迎你们与我一块儿交流和讨论