Vue
因为版本的不同,目录可能会有所区别
1.目录
|— dist #打包之后文件所在位置
|— examples #demo示例
|— flow #因为Vue使用了Flow来进行静态类型检查,这里定义了声明了一些静态类型
|— packages #vue还可以分别生成其它的npm包
|— scripts #打包相关的配置文件,里面有build.js,其中最重要的是config.js。主要是根据不同的入口,打包为不同的文件。
|— 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相关
|— platforms #平台相关的内容(不同平台的支持)
|— web #web端独有文件
|— compiler #编译阶段需要处理的指令和模块
|— runtime #运行阶段需要处理的组件、指令和模块
|— server #服务端渲染相关
|— util #工具库
|— weex #weex端独有文件
|— server #服务端渲染相关(服务端渲染)
|— sfc #.vue 文件解析
|— shared #共享的工具方法
|— test #测试用例
2.主要目录–src
src
├── compiler # 编译相关
├── core # 核心代码
├── platforms # 不同平台的支持
├── server # 服务端渲染
├── sfc # .vue 文件解析
├── shared # 共享代码
2.1 compiler- - -编译相关
compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能。
编译的工作可以在构建时做(借助 webpack、vue-loader 等辅助插件);也可以在运行时做,使用包含构建功能的 Vue.js。显然,编译是一项耗性能的工作,所以更推荐前者——离线编译。
2.2 core- - -核心代码
core 目录包含了 Vue.js 的核心代码,包括内置组件、全局 API 封装,Vue 实例化、观察者、虚拟 DOM、工具函数等等。
2.3 platforms- - -不同平台的支持
Vue.js 是一个跨平台的 MVVM 框架,它可以跑在 web 上,也可以配合 weex 跑在 natvie 客户端上。platform 是 Vue.js 的入口,2 个目录代表 2 个主要入口,分别打包成运行在 web 上和 weex 上的 Vue.js。
2.4 server- - -服务端渲染
Vue.js 2.0 支持了服务端渲染,所有服务端渲染相关的逻辑都在这个目录下。注意:这部分代码是跑在服务端的 Node.js,不要和跑在浏览器端的 Vue.js 混为一谈。
服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记”混合”为客户端上完全交互的应用程序。
2.5 sfc- - -.vue 文件解析
通常我们开发 Vue.js 都会借助 webpack 构建, 然后通过 .vue 单文件来编写组件。
这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。
2.6 shared- - -共享代码
Vue.js 会定义一些工具方法,这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。
推荐:
https://ustbhuangyi.github.io/vue-analysis/prepare/directory.html
https://github.com/liutao/vue2.0-source