vue系列文章 --- 源碼目錄結構整理(三)

vue的版本是:^2.6.10javascript

結構以下:html

|----- 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目錄結構vue

1. src/compiler: 該目錄包含Vue.js全部編譯相關的代碼,包括把模板解析成AST語法樹、及 AST語法樹優化、代碼生成等功能。java

   src/compiler/codegen: 把AST轉換成Render函數。
   src/compiler/parser: 解析模板成AST。
   src/compiler/directives: 生成 Render 函數以前須要處理的指令。node

2. src/core: 該目錄包含了Vue.js的核心代碼,包括內置組件、全局API封裝、Vue實列化、觀察者、虛擬DOM、工具函數等。webpack

   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相關的內容。web

3. src/platforms: platforms 是Vue.js的入口文件,有2個入口文件 web 和 weex,分別打包運行在 web或 weex 平臺上的。json

   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: 服務器端渲染相關的。api

4. src/server: Vue2.0+ 爲了支持服務器端渲染,全部服務器端渲染相關的邏輯都放在這個目錄下。瀏覽器

5. src/sfc:   該目錄下的代碼邏輯會把 .vue 文件內容解析成一個 javascript 的對象。

    src/sfc/parser.js: 轉換單文件組件(*.vue) 解析成一個javascript對象。

6. src/shared: 該目錄下會定義一些工具方法。這些工具方法會被瀏覽器端 Vue.js 和 服務器端 Vue.js所共享的。

相關文章
相關標籤/搜索