)
1. 项目初始化
我们不使用复杂的 Monorepo（pnpm workspace）配置，为了降低学习门槛，我们采用单仓库多模块的结构，重点放在逻辑实现上。
目标结构预览：
Plaintext
mini-vue/ ├── src/ │ ├── reactivity/ <-- 第一阶段的主战场 │ │ ├── index.ts │ │ └── tests/ <-- 测试文件都在这里 │ └── shared/ <-- 公共工具库 ├── package.json ├── tsconfig.json └── vitest.config.ts <-- 测试配置文件第一步：创建文件夹并初始化打开你的终端（Terminal），执行以下命令：
Bash
# 1. 创建目录 mkdir mini-vue cd mini-vue # 2. 初始化 package.json (全部默认) npm init -y # 3. 安装 TypeScript # -D 表示安装为开发依赖 (devDependencies) npm install typescript -D # 4. 初始化 TS 配置 npx tsc --init2. 安装测试神器 —— Vitest
Vue 3 官方以前用 Jest，但现在全面转向了Vitest。 Vitest 基于 Vite，速度极快，开箱即用，而且对 TypeScript 支持极好，不需要像 Jest 那样配一堆 Babel 转换器。
第二步：安装 Vitest
Bash
npm install vitest -D3. 配置文件详解
我们需要修改两个配置文件，确保 TS 和 Vitest 能配合默契。
第三步：配置tsconfig.json找到根目录下的tsconfig.json，把里面的内容替换为以下配置。这一步是为了确保我们能使用最新的 ES6 语法，并且允许引入模块。
JSON
{ "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": ["esnext", "dom"], "types": ["vitest/globals"] } }注意："types": ["vitest/globals"]允许我们在测试文件中直接使用describe,it,expect而不需要每次都 import。
第四步：配置package.json我们需要加一个脚本命令，让我们能一键跑测试。
打开package.json，在"scripts"里添加"test"：
JSON
{ "name": "mini-vue", "version": "1.0.0", "main": "index.js", "scripts": { "test": "vitest" }, "devDependencies": { "typescript": "^5.x.x", "vitest": "^1.x.x" } }4. 实战演练：写下你的第一个测试
环境搭好了，我们来跑通流程。 我们模拟一个简单的加法功能，来验证环境是否正常。
操作动作：
在根目录新建
src文件夹。在
src下新建index.ts（这里放我们的源代码）。在
src下新建index.spec.ts（这里放测试代码，.spec.ts是测试文件的常见后缀）。
文件内容：
src/index.spec.ts(测试文件)
TypeScript
import { add } from "./index"; // describe 定义一个测试分组，名字叫 "init" describe("init", () => { // it 定义一个具体的测试用例 it("should add two numbers", () => { // expect 是断言：我期望 add(1, 1) 的结果是 2 expect(add(1, 1)).toBe(2); }); });src/index.ts(源文件)
TypeScript
export function add(a: number, b: number) { return a + b; }5. 启动引擎！
回到终端，运行：
Bash
npm run test预期结果：你应该会看到终端里出现一片绿色的文字，显示✓ src/index.spec.ts以及Test Files 1 passed。
这意味着：
TypeScript 编译成功。
Vitest 运行成功。
你的代码逻辑通过了测试。
🧠 核心知识点总结 (Review)
Vitest: 我们选用的测试框架。它的特点是快，且对 ESM (import/export) 支持极好。
.spec.ts: 这是测试文件的约定俗成命名，Vitest 会自动扫描所有带.spec或.test的文件并运行。TDD 流程:
以后做每一个功能（比如
reactive），我们都会先写.spec.ts。运行测试 -> 报错 (Red)。
去写代码实现逻辑。
再次运行 -> 通过 (Green)。
重构代码 (Refactor)。
✅ 你的今日任务
动手操作：完全按照上面的步骤，在你的本地建立一个
mini-vue文件夹。跑通测试：确保执行
npm run test后能看到绿色的通过提示。准备就绪：建立
src/reactivity文件夹，我们明天要在这里写下 Vue 3 的第一行核心代码。
