Vue 3 源码项目结构详解

_请输入用户名2025-12-16 13:56

基于版本：Vue 3.5.25

源码地址

1. 项目概览

Vue 3 是一个渐进式 JavaScript 框架，用于构建用户界面。它采用了模块化的架构设计，将核心功能拆分为多个独立的包，以实现更好的代码组织、可维护性和按需引入。

2. 根目录结构

bash 复制代码 
vuejs/core/
├── .github/            # GitHub 配置文件
├── .vscode/            # VSCode 配置文件
├── .well-known/        # 知名配置文件
├── changelogs/         # 版本变更日志
├── packages/           # 核心包目录
├── packages-private/   # 私有包目录（测试、工具等）
├── scripts/            # 构建和开发脚本
├── .git-blame-ignore-revs # Git blame 忽略文件
├── .gitignore          # Git 忽略文件
├── .node-version       # Node.js 版本要求
├── .prettierignore     # Prettier 忽略文件
├── .prettierrc         # Prettier 配置
├── BACKERS.md          # 支持者列表
├── CHANGELOG.md        # 主变更日志
├── FUNDING.json        # 资助信息
├── LICENSE             # 许可证
├── README.md           # 项目说明
├── SECURITY.md         # 安全信息
├── eslint.config.js    # ESLint 配置
├── netlify.toml        # Netlify 配置
├── package.json        # 项目依赖和脚本

3. 核心包结构 (packages/)

Vue 3 的核心功能被拆分为多个独立的包，每个包负责特定的功能域。

3.1 compiler-core

核心编译器，提供跨平台的编译能力，与具体渲染目标无关。

python 复制代码 
compiler-core/
├── __tests__/          # 测试文件
├── src/
│   ├── compat/         # 兼容性处理
│   ├── transforms/     # AST 转换插件
│   ├── ast.ts          # AST 节点定义
│   ├── codegen.ts      # 代码生成器
│   ├── compile.ts      # 编译主函数
│   ├── parser.ts       # 模板解析器
│   └── transform.ts    # AST 转换器
├── LICENSE
├── README.md
└── package.json

3.2 compiler-dom

DOM 编译器，基于 compiler-core 扩展，用于将模板编译为 DOM 渲染函数。

bash 复制代码 
compiler-dom/
├── __tests__/          # 测试文件
├── src/
│   ├── transforms/     # DOM 特定转换
│   └── index.ts        # 入口文件
├── LICENSE
├── README.md
└── package.json

3.3 compiler-sfc

单文件组件 (SFC) 编译器，用于编译 .vue 文件。

bash 复制代码 
compiler-sfc/
├── __tests__/          # 测试文件
├── src/
│   ├── script/         # 脚本处理
│   ├── style/          # 样式处理
│   ├── template/       # 模板处理
│   ├── compileScript.ts # 脚本编译
│   ├── compileStyle.ts # 样式编译
│   ├── compileTemplate.ts # 模板编译
│   └── parse.ts        # SFC 解析器
├── LICENSE
├── README.md
└── package.json

3.4 compiler-ssr

服务端渲染 (SSR) 编译器，用于将模板编译为 SSR 渲染函数。

bash 复制代码 
compiler-ssr/
├── __tests__/          # 测试文件
├── src/
│   ├── transforms/     # SSR 特定转换
│   └── index.ts        # 入口文件
├── LICENSE
├── README.md
└── package.json

3.5 reactivity

响应式系统核心，实现了 Vue 3 的响应式机制。

csharp 复制代码 
reactivity/
├── __benchmarks__/     # 基准测试
├── __tests__/          # 测试文件
├── src/
│   ├── effect.ts       # 副作用系统
│   ├── reactive.ts     # 响应式对象
│   ├── ref.ts          # 响应式引用
│   ├── computed.ts     # 计算属性
│   └── watch.ts        # 监听器
├── LICENSE
├── README.md
└── package.json

3.6 reactivity-transform

注意：该包已被移除

响应式转换，曾提供实验性的响应式语法转换功能。根据 Vue 3.4 的变更日志，该功能在 Vue 3.3 中被标记为弃用，并在 Vue 3.4 中被完全移除。

替代方案：

  • 用户如果想要继续使用响应式转换功能，可以通过 Vue Macros 插件 来实现。
  • 官方推荐使用标准的 ref()、reactive() 和 computed() API 替代。

3.7 runtime-core

核心运行时，提供与平台无关的运行时功能，是Vue 3跨平台能力的基础。

bash 复制代码 
runtime-core/
├── __tests__/          # 测试文件
├── src/
│   ├── component.ts    # 组件系统
│   ├── renderer.ts     # 渲染器
│   ├── vnode.ts        # 虚拟节点
│   ├── scheduler.ts    # 调度器
│   └── h.ts            # 创建虚拟节点的函数
├── LICENSE
├── README.md
└── package.json

详细解析敬请关注

3.8 runtime-dom

DOM 运行时，基于 runtime-core 扩展，提供 DOM 特定的运行时功能。

bash 复制代码 
runtime-dom/
├── __tests__/          # 测试文件
├── src/
│   ├── components/     # DOM 特定组件
│   ├── directives/     # DOM 特定指令
│   ├── modules/        # DOM 模块
│   ├── nodeOps.ts      # DOM 节点操作
│   └── patchProp.ts    # 属性补丁
├── LICENSE
├── README.md
└── package.json

3.9 runtime-test

测试运行时，用于测试 Vue 组件和功能。

3.10 server-renderer

服务器渲染器，用于将 Vue 组件渲染为 HTML 字符串。

3.11 shared

共享工具函数，供其他包使用。

3.12 vue

主包，整合了核心功能，提供完整的 Vue 3 API。

bash 复制代码 
vue/
├── __tests__/          # 测试文件
├── src/
│   ├── index.ts        # 入口文件
│   └── runtime.ts      # 运行时入口
├── LICENSE
├── README.md
└── package.json

3.13 vue-compat

Vue 2 兼容性包，帮助从 Vue 2 迁移到 Vue 3。

4. 私有包结构 (packages-private/)

私有包主要用于测试、开发工具和内部使用。

csharp 复制代码 
packages-private/
├── dts-built-test/     # 类型定义构建测试
├── dts-test/           # 类型定义测试
├── sfc-playground/     # SFC  playground
├── template-explorer/  # 模板浏览器
├── vite-debug/         # Vite 调试
├── global.d.ts         # 全局类型定义
└── tsconfig.json       # TypeScript 配置

5. 脚本目录 (scripts/)

包含项目的构建、开发和发布脚本。

bash 复制代码 
scripts/
├── aliases.js          # 别名配置
├── build.js            # 构建脚本
├── dev.js              # 开发脚本
├── inline-enums.js     # 枚举内联脚本
├── pre-dev-sfc.js      # SFC 开发前置脚本
├── release.js          # 发布脚本
├── setup-vitest.ts     # Vitest 配置
├── size-report.js      # 大小报告脚本
├── usage-size.js       # 使用大小脚本
├── utils.js            # 工具函数
├── verify-commit.js    # 提交验证脚本
└── verify-treeshaking.js # 树摇验证脚本

6. 包之间的依赖关系

Vue 3 的包之间存在清晰的依赖关系，以下是详细的依赖关系图：

vbnet 复制代码 
vue
├── compiler-sfc
│   ├── compiler-core
│   └── compiler-dom
├── runtime-dom
│   ├── runtime-core
│   │   ├── reactivity
│   │   └── shared
│   └── shared
└── server-renderer
    ├── compiler-ssr
    │   ├── compiler-core
    │   └── compiler-dom
    └── runtime-core

详细依赖关系图

graph TD subgraph 基础依赖 shared end subgraph 编译器 compiler-core --> shared compiler-dom --> compiler-core compiler-dom --> shared compiler-ssr --> compiler-core compiler-ssr --> shared compiler-sfc --> compiler-core compiler-sfc --> compiler-dom compiler-sfc --> compiler-ssr compiler-sfc --> shared end subgraph 响应式系统 reactivity --> shared %% reactivity-transform --> reactivity (已移除) end subgraph 运行时 runtime-core --> shared runtime-core --> reactivity runtime-dom --> runtime-core runtime-dom --> shared server-renderer --> runtime-core server-renderer --> compiler-ssr server-renderer --> shared runtime-test --> runtime-core runtime-test --> shared end subgraph 主包 vue --> compiler-sfc vue --> runtime-dom vue --> server-renderer vue --> shared vue-compat --> vue vue-compat --> shared end

依赖关系说明

  1. 共享依赖：

    • shared 包被所有其他包依赖，提供共享的工具函数

  2. 编译器链：

    • compiler-core 是所有编译器的基础
    • compiler-dom 和 compiler-ssr 分别扩展 compiler-core 以支持 DOM 和 SSR 环境
    • compiler-sfc 依赖 compiler-core 和 compiler-dom 来编译单文件组件

  3. 响应式系统：

    • reactivity 是响应式系统的核心

  4. 运行时链：

    • runtime-core 提供与平台无关的运行时功能
    • runtime-dom 扩展 runtime-core 以支持 DOM 环境
    • server-renderer 用于服务器端渲染

  5. 主包：

    • vue 主包整合了所有核心功能
    • vue-compat 提供 Vue 2 兼容性支持

这种模块化的依赖设计使得 Vue 3 具有很好的可扩展性和可维护性，开发者可以根据需要只引入必要的包。

7. 构建流程

  1. 使用 scripts/build.js 脚本构建项目
  2. 支持多种构建格式：ES modules、CommonJS、UMD
  3. 支持开发环境和生产环境构建
  4. 支持按需构建特定包

8. 开发流程

  1. 使用 scripts/dev.js 脚本启动开发服务器
  2. 支持热模块替换
  3. 提供 SFC playground 用于实时编辑和预览组件

9. 测试体系

  1. 使用 Vitest 进行单元测试和基准测试
  2. 提供完整的 E2E 测试
  3. 支持类型定义测试
  4. 支持代码覆盖率报告

10. 发布流程

  1. 使用 scripts/release.js 脚本发布版本
  2. 自动生成变更日志
  3. 支持语义化版本控制
  4. 自动发布到 npm

11. 总结

Vue 3 采用了模块化的架构设计，将核心功能拆分为多个独立的包，以实现更好的代码组织、可维护性和按需引入。这种设计使得 Vue 3 更加灵活、高效，并且易于扩展和定制。

通过了解 Vue 3 的项目结构，开发者可以更好地理解框架的内部工作原理，从而更有效地使用和扩展 Vue 3。

相关推荐
前端无涯5 小时前
Vue3---(2)setup
vue.js
少卿5 小时前
Next.js 国际化实现方案详解
前端·next.js
前端无涯5 小时前
Vue---scoped,deep,CSS Modules
vue.js
掘金挖土5 小时前
手摸手快速搭建 Vue3 + ElementPlus 后台管理系统模板，使用 JavaScript
前端·javascript
CoderHing5 小时前
告别 try/catch 地狱：用三元组重新定义 JavaScript 错误处理
前端·javascript·react.js
前端无涯5 小时前
Vue3---(1)项目工程创建
vue.js
前端无涯5 小时前
Vue3---(3)ref,reactive,toRefs,toRef
vue.js
一念之间lq5 小时前
Elpis 第三阶段· 领域模型架构建设
前端·后端
哆啦A梦15885 小时前
商城后台管理系统 01 Vue-i18n国际化
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04【AutoGLM部署】本地私有化部署AI手机Agent05Open-AutoGLM Windows 安装部署教程06Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10BongoCat - 跨平台键盘猫动画工具