Vue2.x源码学习笔记-源码目录结构整理

vue

转载：https://www.cnblogs.com/sorrowx/p/7932242.html

先从github上下载或者clone一个vue分支项目

https://github.com/vuejs/vue

查看下目录结果

先列出一些目录

Vue

|— build 打包相关的配置文件，其中最重要的是config.js。主要是根据不同的入口，打包为不同的文件。

|— dist 打包之后文件所在位置

|— examples demo示例

|— flow 因为Vue使用了Flow来进行静态类型检查，这里定义了声明了一些静态类型

|— packages vue还可以分别生成其它的npm包

|— src 主要源码所在位置

|— compiler 模板解析的相关文件

|—codegen 根据ast生成render函数

|—directives 通用生成render函数之前需要处理的指令

|—parser 模板解析

|— core 核心代码

|— components 全局的组件，这里只有keep-alive

|— global-api 全局方法，也就是添加在Vue对象上的方法，比如Vue.use,Vue.extend,,Vue.mixin等

|— instance 实例相关内容，包括实例方法，生命周期，事件等

|— observer 双向数据绑定相关文件

|— util 工具方法

|— vdom 虚拟dom相关

|— entries 入口文件，也就是build文件夹下config.js中配置的入口文件。看源码可以从这里看起

|— platforms 平台相关的内容

|— web web端独有文件

|— compiler 编译阶段需要处理的指令和模块

|— runtime 运行阶段需要处理的组件、指令和模块

|— server 服务端渲染相关

|— util 工具库

|— weex weex端独有文件

|— server 服务端渲染相关

|— sfc 暂时未知

|— shared 共享的工具方法

|— test 测试用例

其实我也比较懵逼，这么多目录和文件，好害怕啊。

要想看完它，绝逼是个持久战。

如果没有刘涛大神的博客，我想我是没有勇气看下去了。

因为考虑到，学习一个对于自己不会的框架，看官网的api和demo是最快的捷径，如果想要深入其源码，除了个人需要扎实的js基础和耐心，还必须对vue用的很熟练

且做过好些项目，对于我来说，用vue写过的项目才1个，官网api和文档才看了2遍左右，加上能力有限，想要看起源码，必然很吃力。

所以学习他人积累的经验也是提高自己能力的一条捷径。接下来的每晚，努力看点刘涛大神的博客，且记录下来。

感谢刘涛大神：https://github.com/liutao/vue2.0-source/blob/master/Vue%E6%BA%90%E7%A0%81%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E6%95%B4%E7%90%86.md