企业官网建设流程全解析

• 前端
• Web框架

Vue 2 是 Vue 团队维护的经典渐进式前端框架，本仓库（版本 2.7.16）完整承载了其运行时、模板编译器、响应式系统、服务端渲染与编译器 SFC 工具链的全部源码与测试。本文以仓库 README 为核心骨架，结合源码与构建配置，系统讲解 Vue 2 的核心设计理念、源码架构、构建产物、生态体系与工程实践，帮助读者在维护 Vue 2 项目或研读其源码时快速建立全景认知。

Vue 2 现状：已停止维护（End of Life）

README 第一行即宣告了一个关键事实：Vue 2 已于 2023 年 12 月 31 日达到生命周期终点（End of Life）。这意味着它不再接收新特性、更新或修复，但它仍然在所有既有分发渠道上可用，包括各类 CDN、包管理器以及本 GitHub 镜像仓库。

对使用者而言，这意味着两件事：

• 新项目请直接使用 Vue 3（3.x），README 也强烈建议现有 Vue 2 用户参考官方升级指南进行迁移；
• 不得不停留在 Vue 2 的存量项目，如果面临合规或安全审计要求，可以考虑第三方长期支持方案（如 Vue 2 NES 这类为未维护软件提供补丁支持的商业服务）。

需要强调的是，本仓库就是 Vue 2 的最终形态——版本号定格在2.7.16（见 package.json），源码、测试与构建配置均为完整的"最终版本"形态，非常适合作为学习 Vue 2 实现原理与维护存量项目的权威参照。

什么是 Vue：渐进式框架的设计理念

README 的 Introduction 对 Vue 给出了精确定位：Vue（发音/vjuː/，同 view）是一个用于构建用户界面的渐进式框架（progressive framework）。渐进式意味着：

• 可增量采纳：可以从一个页面、一个组件、一段模板开始引入，无需全量改造；
• 可灵活伸缩：在"库"与"框架"之间自如切换——核心库只聚焦视图层（view layer），而面对大型单页应用（SPA）的复杂度时，再由周边生态库补足路由、状态管理等能力。

这一"聚焦视图层"的定位在源码中得到充分印证。核心运行时入口 src/core/instance/index.ts 中，Vue是一个普通的构造函数，new Vue(options)时调用this._init(options)；随后通过initMixin、stateMixin、eventsMixin、lifecycleMixin、renderMixin五个 mixin 将初始化、状态、事件、生命周期与渲染能力注入原型。整个核心包（src/core/）只做实例、响应式（src/core/observer/）、虚拟 DOM（src/core/vdom/）与组件机制，平台相关的 DOM 操作（如node-ops.ts、patch.ts）则隔离在src/platforms/web/下，体现了"视图层内核 + 平台适配"的清晰分层。

仓库中的 examples/classic/todomvc/app.js 是这种轻量引入方式的直观示范：它只用约 150 行代码，结合localStorage持久化与 hash 路由实现了一个完整 TodoMVC 应用——一个new Vue({...})实例加一个模板即可跑起来，无需任何构建工具。

浏览器兼容性：ES5 标准

README 明确了兼容性边界：Vue.js 支持所有符合 ES5 规范（ES5-compliant）的浏览器，IE8 及以下不支持。

这一承诺由构建链落实。在 scripts/config.js 的genConfig中可以看到，凡是面向浏览器的构建目标（UMD、ESM browser 等），TypeScript 编译目标统一设置为target: 'es5'；只有面向 Node 的构建（如服务端渲染产物）才使用es2017（对应 Node 8）。也就是说，即使今天的浏览器早已全面支持 ES2015+，Vue 2 的浏览器产物在发布时仍会被编译到 ES5，以保证在 IE9～IE11 等老环境可用。

Vue 2.7 的核心源码架构解析

为了深入理解 README 所述"渐进式框架"的具体实现，下面从源码结构出发，梳理 Vue 2.7 的几大核心模块。

1. 构造函数与实例初始化

Vue构造函数定义在 src/core/instance/index.ts，在__DEV__下如果直接用普通函数调用（缺少new）会给出警告。实例化时执行_init(options)，完成选项合并、初始化 data/props/computed/watch、事件、生命周期、渲染与挂载的整套流程。这正是"库"形态的体现：只要一个构造器，即可驱动整个应用。

2. 全局 API 与内置组件

src/core/global-api/index.ts 中的initGlobalAPI(Vue)统一注入了全局能力：

• Vue.config（只读 getter，开发模式下禁止整体替换，只允许修改单个字段）；
• Vue.util（warn、extend、mergeOptions、defineReactive，README 源码注释明确提醒这些不是公共 API，不建议依赖）；
• Vue.set/Vue.delete/Vue.nextTick/Vue.observable；
• Vue.options，按components、directives、filters三类（ASSET_TYPES，定义于 src/shared/constants.ts）初始化并挂载内置组件；
• 随后依次调用initUse、initMixin、initExtend、initAssetRegisters，即Vue.use、Vue.mixin、Vue.extend与全局组件/指令/过滤器注册的由来。

3. 响应式系统：Observer + Dep + Watcher

Vue 2 的响应式原理位于 src/core/observer/index.ts：Observer类会为每个被观察对象挂载__ob__标记，对数组重写arrayMethods（src/core/observer/array.ts）拦截变更方法，对普通对象则逐属性调用defineReactive将属性转换为 getter/setter，从而在读取时收集依赖（Dep）、在写入时派发更新，最终由Watcher（src/core/observer/watcher.ts）驱动组件重新渲染。Vue.observable正是把这一机制以公共 API 的形式暴露给普通对象使用。

这也是 Vue 2 的经典约束来源：新增或删除对象的属性、通过下标修改数组，都无法触发响应式更新，需要改用Vue.set/Vue.delete或数组变异方法。这些约束在 test/unit/modules/observer/observer.spec.ts 等测试中有大量用例覆盖。

4. 模板编译器：parse → optimize → generate

带编译器的运行时（full build）会在运行时把模板字符串编译为渲染函数。核心管线定义在 src/compiler/index.ts 的baseCompile中，三阶段清晰可见：

1. parse(template, options)：将模板解析为 AST（src/compiler/parser/index.ts）；
2. optimize(ast, options)：标记静态节点，便于后续 patch 阶段跳过静态子树（src/compiler/optimizer.ts）；
3. generate(ast, options)：生成render函数与staticRenderFns（src/compiler/codegen/index.ts）。

这一设计允许通过createCompilerCreator替换 parser/optimizer/codegen 来产出定制编译器——服务端渲染的优化编译器（packages/server-renderer/src/optimizing-compiler/）正是这样派生出来的。

5. Vue 2.7 内置的 Vue 3 Composition API

2.7 是 Vue 2 的最后一个次要版本，也是其"准 Vue 3 语法兼容"版本。src/v3/index.ts 集中导出了ref、reactive、computed、watch、watchEffect、provide/inject、h、getCurrentInstance、defineComponent、defineAsyncComponent、EffectScope、useCssModule、useCssVars等 Vue 3 API；在带编译器的入口 src/platforms/web/entry-runtime-with-compiler.ts 中，这些 API 通过extend(Vue, vca)直接挂到Vue命名空间上，因此Vue.ref()、Vue.reactive()等在 2.7 中开箱即用。仓库还提供了对应的组合式 API 示例（examples/composition/todomvc.html）与单元测试（test/unit/features/v3/）。

6. 运行时配置项 Vue.config

src/core/config.ts 定义了Vue.config的完整字段清单与默认值，包括：silent（是否抑制警告，默认false）、productionTip（启动时的生产模式提示，默认__DEV__）、devtools、performance、errorHandler、warnHandler、ignoredElements（忽略的自定义元素）、keyCodes（v-on自定义键位别名）、optionMergeStrategies（选项合并策略）等。开发环境中的Vue.config还禁止整体赋值，防止误用。

构建产物与发行渠道

README 强调 Vue 2 仍可在 CDN、包管理器等渠道获取，这与本仓库的构建体系一一对应。所有构建目标定义在 scripts/config.js，核心产物矩阵如下：

关键约定：运行时 + 编译器版本（full）与仅运行时版本（runtime）的区别在于是否内置模板编译器。使用预编译渲染函数（.vue文件经vue-loader预编译）或render函数时，可选用体积更小的 runtime-only 构建；若需要在浏览器运行时直接编译字符串模板，则必须使用 full build。package.json中exports字段还提供了 Node 环境下的import（dist/vue.runtime.mjs）与require（dist/vue.runtime.common.js）双入口。

常用开发命令（见 package.jsonscripts）：

# 开发调试：监听并构建完整版（full-dev） npm run dev # 构建所有产物 npm run build # 单元测试（vitest） npm run test:unit # 类型检查 npm run ts-check # 端到端测试（需先构建 full-prod 与 server-renderer-basic） npm run test:e2e

也可以执行git clone https://gitcode.com/gh_mirrors/vu/vue后将仓库下载到本地，配合上面的命令进行源码研读与构建实验。在浏览器中使用 Vue 2，可直接通过 CDN 引入 UMD 产物（对应dist/vue.min.js，或从unpkg.com/vue等渠道获取）；在 npm 项目中则通过npm install vue安装，2.7 会安装到与本仓库一致的最终版本。

生态体系：围绕核心库的配套矩阵

README 的 Ecosystem 一节列出了 Vue 2 时代的官方生态项目及其职责，这正是"渐进式框架"可伸缩性的外在体现——核心库解决视图层，生态库解决复杂 SPA 的系统性问题：

其中，与 Vue 2 强绑定、且在本仓库内部维护的部分是服务端渲染（vue-server-renderer）与单文件组件编译工具链：

• 服务端渲染源码位于 packages/server-renderer/src/index.ts，包含基本渲染器、模板渲染器、bundle 渲染器、流式渲染（render-stream.ts）、webpack 插件（packages/server-renderer/src/webpack-plugin/）等模块，覆盖renderToString/renderToStream两种输出方式。仓库提供对应测试（packages/server-renderer/test/）与基准测试（benchmarks/ssr/）；
• 单文件组件（SFC）编译由 packages/compiler-sfc/src/index.ts 实现，负责解析.vue文件（parseComponent）、编译<template>、编译<style>（含 scoped CSS、CSS 变量注入）、编译<script>（compileScript，支持 Composition API 语法）；模板编译器本身独立成包 packages/template-compiler/index.js。vue-loader正是调用这两者的产物来支撑 webpack 构建流程。

示例、基准与测试：仓库即学习手册

除源码外，本仓库还内置了大量可直接运行的示例与测试，是理解 Vue 2 的最佳教材：

• 经典示例examples/classic/：commits、grid、markdown、modal、svg、todomvc、tree 等，覆盖组件、路由、过渡动画、持久化等常见场景；
• 组合式 API 示例examples/composition/：同一批示例的<script setup>风格版本，便于对照迁移；
• 单元测试test/unit/：按 feature（指令、组件、过滤器、实例、options、global-api、v3）、modules（observer、vdom、compiler、util）组织，其中 test/unit/features/v3/ 覆盖 Composition API 行为，test/unit/modules/vdom/ 覆盖虚拟 DOM 与 patch 逻辑；
• 端到端测试test/e2e/：基于真实浏览器跑通 todomvc、grid、markdown 等完整应用；
• 性能基准benchmarks/：big-table、dbmon、svg、ssr 等场景，用于衡量渲染与 SSR 性能。

文档、社区规范与许可

README 对文档、提问、Issue 与贡献渠道的约定如下，对维护存量项目同样有参考价值：

• 文档与在线示例：README 指向官方 Vue 2 文档站点（v2.vuejs.org）查看文档与 live examples；
• 提问与支持：建议使用官方论坛或社区聊天频道；本仓库的 Issue 列表仅用于提交 bug 报告与功能请求，且要求先阅读 Issue 报告清单；
• 版本变更记录：每个版本的详细变更发布在 release notes 中，仓库根目录的 CHANGELOG.md 亦保留历史变更；本仓库内另有 scripts/gen-release-note.js 等发布辅助脚本；
• 贡献：提 Pull Request 前需阅读 Contributing Guide，仓库通过 git hooks（scripts/git-hooks/）校验提交信息与代码风格，package.json中的gitHooks字段配置了pre-commit（lint-staged 格式化）与commit-msg（verify-commit-msg.js校验）；
• 赞助与支持：Vue.js 是 MIT 许可的开源项目，发展依赖社区赞助，backers 名单可查阅 BACKERS.md；
• 许可：Vue 2 采用MIT License，版权归原作者 Evan You（2013 年至今）。

结语

Vue 2 虽已停止维护，但其"渐进式框架"的设计哲学、响应式与虚拟 DOM 的实现细节、以及围绕核心库生长出的完整生态矩阵，仍然深刻影响着今天的 Vue 3 与前端工程实践。本仓库（2.7.16）作为 Vue 2 的最终权威形态，既是存量项目排查问题的可靠参照，也是研读经典前端框架源码的完整标本——从new Vue构造函数到三阶段模板编译，从响应式 Observer 到多形态构建产物，一切都静静陈列在源码与测试之中，等待读者逐一验证。

• 前端
• Web框架