Skip to content
On this page

前言

前端的竞争日益激烈,相信大家在面试中有所体会,如何在竞争中脱颖而出,阅读源码是必不可少的技能;目前国内 vue 和 react 最为火热, react 源码相对较难,最好从 vue 先入手,vue 一万行多代码该如何下手,也是很多人放弃看源码的原因,那我们就不妨慢慢来吧。

相信会有收获!

v2.6.11版本

源码目录结构

├─ .circleci                 # 包含CircleCI持续集成/持续部署工具的配置文件
├─ benchmarks                # 基准和性能测试文件,vue的跑分demo,例如大数据量的table或者渲染大量的SVG
├─ dist                      # 构建后输出的不同版本vue文件(UMD、common.js、生产和开发包)
├─ examples                  # 用vue写的一些小demo
├─ flow                      # 进行静态类型检测,静态类型检测类型声明文件(https://flow.org/)
├─ packages                  # 包含服务端渲染和模块编译器两种不同的NPM包,是提供不同使用场景使用的
├─ scripts                   # 存放npm脚本配置文件,结合webpack、rollup进行编译、测试、构建等操作
│   ├── config.js             # 包含在`dist`中找到的所有文件的生成配置 
│   └── build.js              # 对config.js中所有的rollup配置进行构建
├─ src                       # 主要源码所在位置,核心内容
│   ├── compiler             # 编译器代码,将template编译成render函数
│   ├── core                 # vue核心代码,包括内置组件、全局API封装、vue实例化、观察者、虚拟DOM、工具函数等
│   │   ├── components       # 组件相关属性,主要是keep-Alive
│   │   ├── global-api       # vue全局api。例如:Vue.use Vue.extend vue.mixin
│   │   ├── instance         # 实例化相关内容,生命周期,事件等
│   │   ├── observe          # 响应式核心目录,双向绑定相关文件
│   │   ├── util             # 工具方法
│   │   └── vdom             # 包括虚拟DOM,创建(creation)和打补丁(patching)的代码
│   ├── platforms            # 包含平台特有的相关代码,vue是一个跨平台的mvvm框架(web、weex)
│   │   ├── web              # web端
│   │   │   ├── compiler     # web端编译相关代码,用来编译模版或render函数
│   │   │   ├── runtime      # web端运行是相关代码,用来创建vue实例等
│   │   │   ├── server       # 服务端渲染
│   │   │   └── util         # 相关工具类
│   │   └── weex             # 基于通用跨平台的web开发语言和开发经验,来构建Android、ios和web应用
│   ├── server               # 服务端渲染(ssr)
│   ├── sfc                  # 转换单文件组件(*.vue)
│   └── shared               # 全局共享的方法和常量
├─ test                      # test测试用例
├─ types                     # vue新版本支持TypeScript,主要是用typeScript声明文件
├─ .editorconfig             # 文本编码样式配置文件      
├─ .eslintignore             # eslint校验忽略文件
├─ .eslintrc.js              # eslint配置文件
├─ .flowconfig               # flow配置文件
├─ LICENSE                   # 项目开源协议

Released under the MIT License.