vue源码分析(一) vue目录结构

vue目录

​ 在学习 vue.js 源码之前，我们首先要分析一下源码目录结构，了解每个文件夹或文件的作用，有助于我们后续的源码阅读和对 vue.js 框架的整体认识，下面是 vue.js 源码的主要文件夹和文件的详细说明。

|── .circleci ----------------------------- 包含CircleCI持续集成/持续部署工具的配置文件
|── .github ------------------------------- 项目相关的说明文档，上面的说明文档就在此文件夹
|── benchmarks ---------------------------- 基准,性能测试文件，Vue的跑分demo，比如大数据量的table或者渲染大量SVG；目的主要有两种，一是验证性能，另一个是获得一些基准数据
├── dist ---------------------------------- 构建后不同版本Vue文件的输出目录(UMD、CommonJS、ES 生产和开发包)
├── examples ------------------------------ 存放一些使用Vue开发的应用案例
├── flow ---------------------------------- 类型声明，因为Vue使用了Flow来进行静态类型检查，静态类型检查类型声明文件
├── packages ------------------------------ 存放独立发布的包的目录(https://flowtype.org/)，包含服务端渲染和模板编译器两种不同的NPM包，是提供给不同使用场景使用的
├── scripts ------------------------------- 存放npm脚本配置文件，结合webpack、rollup进行编译、测试、构建等操作，一般情况下我们不需要动
│   ├── git-hooks ------------------------- 存放git钩子的目录
│   ├── alias.js -------------------------- 模块导入所有源代码和测试中使用的别名
│   ├── build.js -------------------------- 对 config.js 中所有的rollup配置进行构建
│   ├── config.js ------------------------- 生成rollup配置的文件，包含在`dist/`中找到的所有文件的生成配置
│   ├── release.sh ------------------------ 用于自动发布新版本的脚本
├── src ----------------------------------- 主要源码所在位置，核心内容
│   ├── compiler -------------------------- 编译器代码的存放目录，将 template 编译为 render 函数
│   │   ├── codegen ----------------------- 把AST转换为Render函数
│   │   ├── directives -------------------- 通用生成Render函数之前需要处理的指令
│   │   ├── parser------------------------- 解析模版成AST 
│   ├── core ------------------------------ Vue核心代码，包括内置组件，全局API封装，Vue 实例化，观察者，虚拟DOM, 工具函数等等，与平台无关的代码
│   │   ├── components -------------------- 组件相关属性，主要是Keep-Alive
│   │   ├── global-api -------------------- 包含给Vue构造函数挂载全局方法(静态方法)或属性的代码，如Vue.use,Vue.extend,Vue.mixin等
│   │   ├── instance ---------------------- 实例化相关内容，生命周期、事件等
│   │   ├── observer ---------------------- 响应式核心目录，双向数据绑定相关文件
│   │   ├── util -------------------------- 工具方法
│   │   ├── vdom -------------------------- 包含虚拟DOM创建(creation)和打补丁(patching)的代码
│   ├── platforms ------------------------- 和平台相关的内容，Vue.js 是一个跨平台的MVVM 框架(web、native、weex)，不同平台的不同构建的入口文件也在这里
│   │   ├── web --------------------------- web平台
│   │   |   ├── compiler ------------------ web端编译相关代码，用来编译模版成render函数basic.js
│   │   |   ├── runtime ------------------- web端运行时相关代码，用于创建Vue实例等
│   │   |   ├── server -------------------- 服务端渲染
│   │   |   ├── util ---------------------- 相关工具类
│   │   │   ├── entry-compiler.js --------- vue-template-compiler 包的入口文件
│   │   │   ├── entry-runtime-with-compiler.js -- 独立构建版本的入口，它在 entry-runtime 的基础上添加了模板(template)到render函数的编译器
│   │   │   ├── entry-runtime.js ---------- 运行时构建的入口，不包含模板(template)到render函数的编译器，所以不支持 `template` 选项，我们使用vue默认导出的就是这个运行时的版本。大家使用的时候要注意
│   │   │   ├── entry-server-basic-renderer.js -- 输出 packages/vue-server-renderer/basic.js 文件
│   │   │   ├── entry-server-renderer.js -- vue-server-renderer 包的入口文件
│   │   ├── weex -------------------------- 基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用
│   ├── server ---------------------------- 包含服务端渲染(server-side rendering，ssr)的相关代码
│   ├── sfc ------------------------------- 包含单文件组件(*.vue文件)的解析逻辑，用于vue-template-compiler包
│   ├── shared ---------------------------- 包含整个代码库通用的代码
├── test ---------------------------------- 包含所有测试文件
├── types --------------------------------- Vue新版本支持TypeScript，主要是TypeScript类型声明文件]
├── .babelrc ------------------------------ babel 配置文件
├── .editorconfig ------------------------- 针对编辑器的编码风格配置文件
├── .eslintignore ------------------------- eslint 忽略配置
├── .eslintrc ----------------------------- eslint 配置文件
├── .flowconfig --------------------------- flow 的配置文件
├── .gitignore ---------------------------- git 忽略配置
├── BACKERS.md ---------------------------- 赞助者信息文件
├── LICENSE ------------------------------- 项目开源协议
├── package.json -------------------------- 依赖
├── README.md ----------------------------- 说明文件
└── yarn.lock ----------------------------- yarn版本锁定文件

​ 了解整体框架结构，下一章我们就来分析一下不同版本的 vue.js 是如何构建的。