第2章环境搭建准备

2、环境搭建准备：Node.js版本选择、npm/yarn/pnpm配置、创建Vue3项目

好，咱们正式开始动手了。

写测试之前，得先把地基打牢。说白了，就是把你电脑上的 Node.js、包管理工具、还有 Vue3 项目给整明白。这一步要是出问题，后面跑测试全是红字，心态容易崩。

我见过不少新手，一上来就装最新版 Node，结果项目跑不起来。嗯，这里头有讲究。

2.1 Node.js 版本选择：别追新，要追稳

我个人习惯，Node.js 选 LTS（长期支持）版本。别用 Current 版，除非你想当小白鼠。

Vue3 和它的测试生态，对 Node 版本有要求。我建议你装 Node.js 18.x 或 20.x 的 LTS 版本。为什么？

18.x：目前最稳，社区支持最好。Vite、Vitest、Jest 都跑得很顺。
20.x：新特性多，但有些老库可能还没适配。如果你项目里依赖多，先别急着升。

避坑指南： 我曾经在 16.x 版本上折腾了半天，发现 Vitest 的某些 API 不支持。查了文档才知道，最低要求是 Node 18。所以，别用低于 18 的版本。

怎么检查你当前的版本？打开终端，敲一行命令：

node -v
# 输出类似 v18.20.4 或 v20.11.0

如果版本不对，去 nodejs.org 下载 LTS 版本，或者用 nvm（Node Version Manager）来切换。我个人推荐 nvm，因为可以随时切版本，方便测试兼容性。

小技巧： 装完 nvm 后，用 nvm install 18 和 nvm use 18 就能搞定。你想想看，一个项目一个版本，互不干扰，多省心。

2.2 npm / yarn / pnpm：选哪个？

包管理工具，说白了就是帮你下载和管理依赖的。现在主流的有三个：npm、yarn、pnpm。

我直接给结论：选 pnpm。为什么？

速度快：pnpm 用了硬链接和符号链接，安装依赖比 npm 快好几倍。我项目里上百个依赖，pnpm 几秒就装完，npm 得等半天。
省磁盘：同样的依赖，pnpm 只存一份，多个项目共享。你想想看，十个项目都用 Vue，pnpm 只存一次，npm 存十次。磁盘空间就是这么省出来的。
严格：pnpm 的 node_modules 结构更规范，不会出现幽灵依赖。我在项目中遇到过，npm 装完依赖后，某个包莫名其妙能访问到没声明的包，查 bug 查到怀疑人生。pnpm 直接杜绝这个问题。

当然，如果你团队习惯用 yarn，或者项目已经用了 npm，也没问题。测试工具对它们都支持。但如果你是新项目，我建议你试试 pnpm。

安装 pnpm 很简单：

npm install -g pnpm

或者用 npx：

npx pnpm add -g pnpm

装完后检查版本：

pnpm -v
# 输出类似 9.x

  重要： 本课程后续所有命令，我都会用 pnpm 演示。如果你用 npm 或 yarn，命令大同小异，自己替换一下就行。

2.3 创建 Vue3 项目：用 Vite 就对了

Vue3 官方推荐用 Vite 创建项目。Vite 快，热更新快，配置简单。你想想看，以前用 Vue CLI 创建项目，等半天。Vite 几秒钟就搞定。

打开终端，执行：

pnpm create vue@latest

然后你会看到交互式提示，像这样：

✔ Project name: … vue3-test-demo
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

这里要注意：我们选 Yes for Vitest。这样 Vite 会自动帮你配好 Vitest 测试环境，省去手动配置的麻烦。

其他选项，按需选择。我个人习惯：

TypeScript：选 Yes。类型检查能帮你提前发现很多 bug，写测试时尤其有用。
Vue Router：如果项目需要路由，选 Yes。
Pinia：状态管理，选 Yes。
ESLint + Prettier：选 Yes。代码风格统一，团队协作必备。

创建完成后，进入项目目录并安装依赖：

cd vue3-test-demo
pnpm install

然后启动项目看看：

pnpm dev

浏览器打开 http://localhost:5173，看到 Vue3 的欢迎页面，就说明项目跑起来了。

小提示： 如果你用的是 pnpm，安装依赖时会自动生成 pnpm-lock.yaml 文件。记得把这个文件提交到 Git，它能保证团队所有人装的依赖版本一致。

2.4 验证测试环境是否就绪

既然我们选了 Vitest，那项目里应该已经配好了。验证一下：

打开 package.json，看看有没有这段：

{
  "scripts": {
    "test:unit": "vitest"
  }
}

然后运行：

pnpm test:unit

如果看到类似这样的输出：

✓ src/components/__tests__/HelloWorld.spec.ts (1 test)

恭喜你，测试环境已经搭好了！

如果没有，别慌。检查一下 vite.config.ts 或 vitest.config.ts，看看有没有引入 Vitest 插件。Vite 创建项目时，如果选了 Vitest，会自动生成类似这样的配置：

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
})

这里 globals: true 表示测试文件中可以直接使用 describe、it、expect 等全局 API，不用手动导入。environment: 'jsdom' 模拟浏览器环境，让测试能操作 DOM。

注意： 如果你没选 Vitest，或者项目是手动创建的，后面章节我会教你如何手动配置。别担心，跟着走就行。

2.5 目录结构一览

项目创建好后，目录结构大概长这样：

vue3-test-demo/
├── src/
│   ├── components/
│   │   └── __tests__/
│   │       └── HelloWorld.spec.ts
│   ├── App.vue
│   └── main.ts
├── public/
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── pnpm-lock.yaml

注意 src/components/__tests__/ 这个目录。Vite 默认会把测试文件放在 __tests__ 文件夹里，或者以 .spec.ts / .test.ts 结尾的文件。这个约定很清晰，我建议你保持。

📚 课程目录

2、环境搭建准备：Node.js版本选择、npm/yarn/pnpm配置、创建Vue3项目

2.1 Node.js 版本选择：别追新，要追稳

2.2 npm / yarn / pnpm：选哪个？

2.3 创建 Vue3 项目：用 Vite 就对了

2.4 验证测试环境是否就绪

2.5 目录结构一览