vue系列文章 --- 源码目录结构整理

Posted 2020-12-01 tugenhua0707

vue的版本是：^2.6.10

结构如下：

|----- vue
|  |--- dist                             # 打包之后的目录vue文件
|  | |--- vue.common.dev.js
|  | |--- vue.common.js
|  | |--- vue.common.prod.js
|  | |--- vue.esm.browser.js
|  | |--- vue.esm.browser.min.js
|  | |--- vue.esm.js
|  | |--- vue.js
|  | |--- vue.min.js
|  | |--- vue.runtime.common.dev.js
|  | |--- vue.runtime.common.js
|  | |--- vue.rintime.common.prod.js
|  | |--- vue.runtime.esm.js
|  | |--- vue.runtime.js
|  | |--- vue.runtime.min.js
|  |--- src
|  | |--- compiler                       # 模板解析相关的文件
|  | | |--- codegen                      # 根据Ast 生成 render 函数
|  | | | |--- events.js
|  | | | |--- index.js
|  | | |--- directives                   # 生成 render 函数之前需要处理的指令
|  | | | |--- bind.js
|  | | | |--- index.js
|  | | | |--- model.js
|  | | | |--- on.js
|  | | |--- parser                       # 模板解析
|  | | | |--- entity-decoder.js
|  | | | |--- filter-parser.js
|  | | | |--- html-parser.js
|  | | | |--- index.js
|  | | | |--- text-parser.js
|  | | |--- codeframe.js
|  | | |--- create-compiler.js
|  | | |--- error-detector.js
|  | | |--- helpers.js
|  | | |--- index.js
|  | | |--- optimizer.js
|  | | |--- to-function.js
|  | |---- core
|  | |  |--- components                 # 全局组件 目前只有 keep-alive
|  | |  | |--- index.js
|  | |  | |--- keep-alive.js
|  | |  |--- global-api                 # 全局方法 添加到vue上的方法
|  | |  | |--- assets.js
|  | |  | |--- extends.js
|  | |  | |--- index.js
|  | |  | |--- mixin.js
|  | |  | |--- use.js
|  | |  |--- instance                   # 实列相关的内容 包括实列方法。生命周期，事件等。
|  | |  | |--- render-helpers
|  | |  | |  |--- bind-dynamic-keys.js
|  | |  | |  |--- bind-object-listeners.js
|  | |  | |  |--- bind-object-props.js
|  | |  | |  |--- check-keycodes.js
|  | |  | |  |--- index.js
|  | |  | |  |--- render-list.js
|  | |  | |  |--- render-slot.js
|  | |  | |  |--- render-static.js
|  | |  | |  |--- resolve-filter.js
|  | |  | |  |--- resolve-scoped-slots.js
|  | |  | |  |--- resolve-slots.js
|  | |  | |--- events.js
|  | |  | |--- index.js
|  | |  | |--- init.js
|  | |  | |--- inject.js
|  | |  | |--- lifecycle.js
|  | |  | |--- proxy.js
|  | |  | |--- render.js
|  | |  | |--- state.js
|  | |  |--- observer                   # 数据双向绑定文件
|  | |  | |--- array.js
|  | |  | |--- dep.js
|  | |  | |--- index.js
|  | |  | |--- scheduler.js
|  | |  | |--- traverse.js
|  | |  | |--- watcher.js
|  | |  |--- util                       # 工具方法
|  | |  | |--- debug.js
|  | |  | |--- env.js
|  | |  | |--- error.js
|  | |  | |--- index.js
|  | |  | |--- lang.js
|  | |  | |--- next-tick.js
|  | |  | |--- options.js
|  | |  | |--- perf.js
|  | |  | |--- props.js
|  | |  |--- vdom                       # 虚拟dom相关的
|  | |  | |--- helpers
|  | |  | | |--- extract-props.js
|  | |  | | |--- get-first-component-child.js
|  | |  | | |--- index.js
|  | |  | | |--- is-async-placeholder.js
|  | |  | | |--- merge-hook.js
|  | |  | | |--- normalize-children.js
|  | |  | | |--- normalize-scoped-slots.js
|  | |  | | |--- resolve-async-component.js
|  | |  | | |--- update-listeners.js
|  | |  | |--- modules
|  | |  | | |--- directives.js
|  | |  | | |--- index.js
|  | |  | | |--- ref.js
|  | |  | |--- create-component.js
|  | |  | |--- create-element.js
|  | |  | |--- create-functional-component.js
|  | |  | |--- patch.js
|  | |  | |--- vnode.js
|  | |  |--- config.js                   # 入口配置文件
|  | |  |--- index.js 
|  | |--- platforms                      # 平台相关的 
|  | | |--- web                          # web平台
|  | | | |--- compiler                   # 编译期间需要处理的指令和模块
|  | | | | |--- directives               # 指令
|  | | | | |  |--- html.js
|  | | | | |  |--- index.js
|  | | | | |  |--- model.js
|  | | | | |  |--- text.js
|  | | | | |--- modules                  # 模块
|  | | | | | |--- class.js
|  | | | | | |--- index.js
|  | | | | | |--- model.js
|  | | | | | |--- style.js
|  | | | | |--- index.js
|  | | | | |--- options.js
|  | | | | |--- util.js
|  | | | |--- runtime                    # 运行阶段处理的组件、指令和模块
|  | | | | |--- components               # 相关的组件
|  | | | | | |--- index.js
|  | | | | | |--- transition-group.js
|  | | | | | |--- transition.js
|  | | | | |--- directives               # 相关的指令
|  | | | | | |--- index.js
|  | | | | | |--- model.js
|  | | | | | |--- show.js
|  | | | | |--- modules                  # 相关的模块
|  | | | | | |--- attrs.js
|  | | | | | |--- class.js
|  | | | | | |--- dom-props.js
|  | | | | | |--- events.js
|  | | | | | |--- index.js
|  | | | | | |--- style.js
|  | | | | | |--- transition.js
|  | | | | |--- class-util.js
|  | | | | |--- index.js
|  | | | | |--- node-ops.js
|  | | | | |--- patch.js
|  | | | | |--- transition-util.js
|  | | | |--- server                    # 服务端渲染的指令和模块
|  | | | | |--- directives              # 指令
|  | | | | | |--- index.js
|  | | | | | |--- model.js
|  | | | | | |--- show.js
|  | | | | |--- modules                 # 模块
|  | | | | | |--- attrs.js
|  | | | | | |--- class.js
|  | | | | | |--- dom-props.js
|  | | | | | |--- index.js
|  | | | | | |--- style.js
|  | | | | |--- compiler.js
|  | | | | |--- util.js
|  | | | |--- util
|  | | | | |--- attrs.js
|  | | | | |--- class.js
|  | | | | |--- compat.js
|  | | | | |--- element.js
|  | | | | |--- index.js
|  | | | | |--- style.js
|  | | | |--- entry-compiler.js
|  | | | |--- entry-runtime-with-compiler.js
|  | | | |--- entry-runtime.js
|  | | | |--- entry-server-basic-renderer.js
|  | | | |--- entry-server-renderer.js
|  | | |--- weex                        # weex平台
|  | |--- server
|  | | |--- bundle-renderer
|  | | | |--- create-bundle-renderer.js
|  | | | |--- create-bundle-runner.js
|  | | | |--- source-map-support.js
|  | | |--- optimizing-compiler
|  | | | |--- codegen.js
|  | | | |--- index.js
|  | | | |--- modules.js
|  | | | |--- optimizer.js
|  | | | |--- runtime-helpers.js
|  | | |--- template-renderer
|  | | | |--- create-async-file-mapper.js
|  | | | |--- index.js
|  | | | |--- parse-template.js
|  | | | |--- template-stream.js
|  | | |--- webpack-plugin
|  | | | |--- client.js
|  | | | |--- server.js
|  | | | |--- util.js
|  | | |--- create-basic-renderer.js
|  | | |--- create-renderer.js
|  | | |--- render-context.js
|  | | |--- render-stream.js
|  | | |--- render.js
|  | | |--- util.js
|  | | |--- write.js
|  | |--- sfc
|  | | |--- parser.js
|  | |--- shared
|  | | |--- constants.js
|  | | |--- util.js
|  | 
|  |--- types
|  | |--- index.d.ts
|  | |--- options.d.ts
|  | |--- plugin.d.ts
|  | |--- vnode.d.ts
|  | |--- vue.d.ts
|  |--- package.json
|  |--- README.md

如上是 vue2.6.10版本所有的js目录结构

1. src/compiler: 该目录包含Vue.js所有编译相关的代码，包括把模板解析成AST语法树、及 AST语法树优化、代码生成等功能。

   src/compiler/codegen: 把AST转换成Render函数。
   src/compiler/parser: 解析模板成AST。
   src/compiler/directives: 生成 Render 函数之前需要处理的指令。

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

   src/core/components: 组件相关的属性，目前这里只有keep-alive组件
   src/core/global-api: Vue的全局api, 比如 Vue.extend、Vue.mixin.
   src/core/instance: 实例化相关的。比如 生命周期、事件等。
   src/core/observer: Vue响应式数据相关的目录。
   src/core/util: Vue相关的工具方法目录。
   src/core/vdom: 虚拟dom相关的内容。

3. src/platforms: platforms 是Vue.js的入口文件，有2个入口文件 web 和 weex，分别打包运行在 web或 weex 平台上的。

   src/platforms/web 平台上的(src/platforms/weex 也是一样的意思)。
   src/platforms/web/compiler: web端编译器相关的代码，用来编译模板成Render函数。
   src/platforms/web/runtime: web端运行时相关的代码，用来创建Vue实列等操作。
   src/platforms/web/util: 相关工具类。
   src/platforms/web/server: 服务器端渲染相关的。

4. src/server: Vue2.0+ 为了支持服务器端渲染，所有服务器端渲染相关的逻辑都放在这个目录下。

5. src/sfc:   该目录下的代码逻辑会把 .vue 文件内容解析成一个 javascript 的对象。

    src/sfc/parser.js: 转换单文件组件(*.vue) 解析成一个javascript对象。

6. src/shared: 该目录下会定义一些工具方法。这些工具方法会被浏览器端 Vue.js 和 服务器端 Vue.js所共享的。