本文介绍了使用pnpm创建Vue3项目的完整流程。
首先配置WSL前端开发环境，通过VS Code连接WSL远程开发。
使用pnpm创建包含TypeScript、Vue Router、Pinia、ESLint和Prettier的Vue3项目。
详细分析了JSX和模板语法的适用场景，建议业务应用使用模板语法。
介绍了Vitest单元测试框架和E2E测试的重要性，特别适合管理系统这类复杂应用。
最后讨论了实验性功能Oxlint和rolldown-vite的选择建议，推荐新手选择稳健方案。
整个过程从环境配置到项目初始化，为开发者提供了完整的Vue3+TypeScript开发环境搭建指南。
环境配置参考
前端开发环境（WSL：Node.js + pnpm）配置过程错误及解决（附：初始化一个 Vue 3 测试项目）
打开 vsCode 连接 WSL 远程
直接点击连接到=》打开文件夹=》找到你的项目根目录
在查看里面打开终端，现在显示的就是整个项目根目录。可以在这里新建项目。
使用 pnpm 创建 Vue 3 项目
bash
pnpm create vue@latest SmartFridgeManager -- --typescript --router --pinia --eslint --prettier说明：
-
SmartFridgeManager是项目名称 -
所有需要的特性都包含在一个命令中：
-
--typescript：TypeScript 支持 -
--router：Vue Router -
--pinia：状态管理 -
--eslint：代码检查 -
--prettier：代码格式化
-
执行后，需要：
-
进入项目目录：
cd SmartFridgeManager -
安装依赖：
pnpm install -
启动开发服务器：
pnpm dev
这样创建的项目将包含完整的 Vue 3 + TypeScript 开发环境，并配置了 ESLint 和 Prettier 进行代码格式化。
开始新建项目
bash
pnpm create vue@latest SmartFridgeManager -- --typescript --router --pinia --eslint --prettier提示是否安装的一些选项
什么是 JSX
JSX 是一种 JavaScript 语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的标记。虽然 Vue 默认使用模板语法（.vue 文件中的 <template>），但 Vue 也支持使用 JSX。
1. 替代模板语法
2. 主要使用场景
-
库/组件库开发：许多 Vue UI 库（如 Element Plus、Ant Design Vue）使用 JSX
-
复杂逻辑组件：当渲染逻辑非常复杂时，JSX 可能比模板更灵活
-
React 开发者迁移：熟悉 React 的开发者更习惯 JSX
-
动态组件生成：需要高度动态生成组件结构的情况
3. 与模板语法的对比
| 特性 | 模板语法 | JSX 语法 |
|---|---|---|
| 学习曲线 | 简单，类似 HTML | 需要学习 JSX 语法 |
| 类型支持 | TypeScript 支持较好 | TypeScript 支持更好 |
| 灵活性 | 受限于模板语法 | 更灵活，可使用完整 JavaScript |
| 性能 | 编译时优化 | 运行时编译 |
| 调试 | 模板编译错误 | JavaScript 错误 |
| IDE 支持 | 需要 Vue 插件 | 标准 JS/TS 支持 |
4. 什么时候选择 JSX？
推荐选择 JSX：
-
你或团队熟悉 React
-
项目需要大量动态组件生成
-
需要更好的 TypeScript 类型推断
-
开发通用组件库
推荐使用模板：
-
大多数业务应用
-
团队熟悉 HTML/Vue 模板
-
需要更好的性能（编译时优化）
-
希望更好的 IDE 支持（Volar）
5. 安装 JSX 支持后
如果选择安装 JSX support，会添加：
-
@vue/babel-plugin-jsx或@vue/babel-preset-jsx -
配置支持
.jsx和.tsx文件扩展名 -
可以在项目中混合使用
.vue和.jsx/.tsx文件
6. 项目创建时的建议
-
推荐不选 JSX：使用 Vue 模板语法更合适
-
理由：业务应用通常模板语法足够，更易维护
-
除非你有特定需求或团队偏好 JSX
7. 后续添加
即使现在不选，以后也可以随时添加 JSX 支持：
bash
pnpm add @vue/babel-plugin-jsx总结 ：除非你有明确的 JSX 需求，否则对于大多数 Vue 3 项目，特别是业务应用，使用默认的模板语法是更好的选择。
什么是 Vitest
Vitest 是一个基于 Vite 的现代化单元测试框架，专为 Vue 3 和现代 JavaScript 项目设计。
核心特性
1. 与 Vite 生态完美集成
bash
# 使用相同的配置
vite.config.ts # 开发构建配置
vitest.config.ts # 测试配置（可共用vite配置）2. 极快的速度
-
智能文件监听（只运行相关测试）
-
并发测试执行
-
几乎零配置启动
3. 与 Jest 高度兼容
javascript
// Jest 用户很容易迁移
describe('MyComponent', () => {
test('should work', () => {
expect(1 + 1).toBe(2)
})
})在 Vue 3 项目中的用途
-
组件单元测试
-
组合函数测试
-
工具函数测试
Vitest vs Jest 对比
| 特性 | Vitest | Jest |
|---|---|---|
| 速度 | ⚡ 极快（基于 Vite） | 较慢 |
| 配置 | 简单，复用 Vite 配置 | 需要单独配置 |
| ESM 支持 | ✅ 原生支持 | ⚠️ 需要配置 |
| TypeScript | ✅ 零配置支持 | ⚠️ 需要 ts-jest |
| 热更新 | ✅ 即时更新 | ❌ 较慢 |
| 生态系统 | 发展中 | 成熟完善 |
| 浏览器 API | ✅ 内置 Mock | ⚠️ 需要 jsdom |
推荐选择 Vitest
因为：
-
项目需要可靠的管理逻辑
-
组件交互复杂需要测试
-
Vue 3 + Vite 生态完美集成
-
保证应用质量和维护性
即使不选，后期也可轻松添加：
bash
pnpm add -D vitest @vue/test-utilsVitest 让单元测试变得简单快速，特别适合需要高质量保证的智能冰箱管理系统。
End-to-End Testing
End-to-End Testing（端到端测试，简称 E2E 测试） 是从用户角度模拟真实使用场景的测试方法，测试整个应用程序的完整流程。
核心概念
1. 与单元测试的区别
| 测试类型 | 测试范围 | 关注点 | 速度 |
|---|---|---|---|
| 单元测试 | 单个函数/组件 | 代码逻辑正确性 | ⚡ 快 |
| 集成测试 | 多个模块交互 | 模块间协作 | ⚡ 中等 |
| E2E 测试 | 整个应用流程 | 用户体验/业务流程 | 🐢 慢 |
2. 测试金字塔
/\
/ \ 少量 E2E 测试
/____\ 用户场景验证
/ \
/________\ 适量集成测试
/ \ 模块间交互
/____________\ 大量单元测试
基础功能验证在 Vue 3 项目中的用途
-
测试真实用户流程
-
关键业务流程
Vue 3 项目中常见的 E2E 工具
-
Cypress（创建 Vue 项目时默认选项）
-
Playwright
-
Puppeteer
E2E 测试的优势
1. 发现集成问题
javascript
// 可能发现的问题
- 前端与 API 不匹配
- 路由导航问题
- 认证/授权流程缺陷
- 浏览器兼容性问题
- 移动端响应式问题2. 模拟真实用户行为
javascript
// 真实场景测试
test('用户操作顺序可能出乎意料', async () => {
// 用户可能：后退 → 刷新 → 重复提交
await page.goBack()
await page.reload()
await page.click('button[type="submit"]')
await page.click('button[type="submit"]') // 重复点击！
})成本和收益考虑
适合 E2E 测试的情况（✅ 推荐）：
-
关键业务路径（注册、支付、下单）
-
跨组件集成流程
-
用户体验验证
-
发布前的回归测试
可能不需要 E2E 测试的情况（❌ 可选）：
-
小型个人项目
-
原型/MVP 阶段
-
没有复杂用户流程
-
资源有限的团队
建议选择 E2E 测试，因为：
-
涉及重要数据操作：食品库存、用户数据
-
多步骤流程：注册 → 添加食品 → 生成清单
-
跨平台使用：Web + 移动端 PWA
-
家庭共享功能：复杂的权限和同步逻辑
如果资源有限，可以先测试：
// 最小化 E2E 测试集
1. 用户注册和登录
2. 添加和管理食品
3. 过期食品提醒
4. 购物清单生成总结
End-to-End Testing 是验证应用从用户角度能否正常工作的关键手段。 有实际业务流程的应用，E2E 测试能确保：
-
✅ 用户流程完整可用
-
✅ 不同模块正确集成
-
✅ 数据一致性得到保障
-
✅ 发布前发现重大缺陷
建议： 开始可以选择 Cypress（Vue 项目集成好），编写少量关键路径测试，随着项目发展逐步增加。
bash
Select experimental features to include in your project: (↑/↓ to
navigate, space to select, a to toggle all, enter to confirm)
│ ◻ Oxlint
│ ◻ rolldown-vite (experimental)这两个是 Vue 项目创建时的实验性功能选项。
Oxlint
Oxlint 是一个用 Rust 编写的超快速 JavaScript/TypeScript linter，旨在替代 ESLint。
优势：
-
⚡ 极速：Rust 编写，比 Node.js 的 ESLint 快得多
-
🔋 电池内置：开箱即用，无需复杂配置
-
🎯 TypeScript 友好：对 Vue 3 + TypeScript 支持好
当前状态：
-
✅ 可用于生产
-
⚠️ 生态还在发展中（插件比 ESLint 少）
-
🔄 部分 Vue 特定规则可能不如 ESLint 完善
rolldown-vite
Rolldown 是用 Rust 编写的 JavaScript 打包工具，旨在替代 Rollup，与 Vite 深度集成。
优势：
-
🏎️ 更快的生产构建：Rust 编写，构建速度提升
-
📦 更好的 tree-shaking：更智能的代码优化
-
🔄 与 Vite 无缝集成：替代 Rollup 作为生产构建器
性能对比：
传统构建（Rollup）：
✅ 开发热更新：快
⚠️ 生产构建：中等
使用 rolldown：
✅ 开发热更新：快
✅ 生产构建：更快（提升 20-50%）当前状态：
-
🔬 实验性阶段（标注了 experimental）
-
⚠️ 可能存在兼容性问题
-
🚧 仍在积极开发中
是否选择 Oxlint
✅ 推荐选择，如果：
-
你追求极致速度（大型项目尤其明显）
-
不依赖复杂 ESLint 插件
-
愿意尝试新技术
❌ 建议不选，如果：
-
需要特定 ESLint 插件（如 Vue 3 推荐规则）
-
团队已有 ESLint 配置经验
-
需要完美的 Vue SFC 支持
对于你的项目：
# 如果选择 Oxlint，会得到：
- oxlint 替换 eslint
- 更快的代码检查
- 简化的配置是否选择 rolldown-vite
✅ 推荐选择，如果：
-
项目会频繁构建生产版本
-
应用规模会逐渐增大
-
愿意接受实验性技术
❌ 建议不选，如果：
-
项目主要是开发期间使用
-
对构建稳定性要求极高
-
不需要优化构建速度
我的推荐方案
方案 A：稳健方案（推荐新手）
[ ] Oxlint # 保持 ESLint（生态更成熟）
[ ] rolldown-vite # 暂时不用实验性功能理由： 项目初期，稳定性更重要
方案 B：激进方案（喜欢尝鲜）
[x] Oxlint # 体验极速 linting
[ ] rolldown-vite # 生产构建暂不用实验功能理由： Oxlint 相对稳定，开发体验提升明显
方案 C：完全实验方案
[x] Oxlint # 快速代码检查
[x] rolldown-vite # 快速生产构建理由： 追求极致性能，接受可能的小问题
选择建议总结
-
Oxlint ：✅ 可以考虑选择
-
开发体验提升明显
-
对 Vue 3 + TypeScript 支持良好
-
即使有问题，可以随时切换回 ESLint
-
-
rolldown-vite ：⚠️ 建议暂时不选
-
标注为实验性
-
生产构建稳定性重要
-
可以等项目稳定后再考虑
-
最终推荐选择：
[✓] Oxlint
[ ] rolldown-vite (experimental)这样你既能体验现代化的极速 linting，又能保持项目构建的稳定性。以后随时可以添加 rolldown 或切换回 ESLint。
Skip all example code and start with a blank Vue project?
bash
Skip all example code and start with a blank Vue project?是的，推荐选择 "Skip all example code and start with a blank Vue project"（跳过所有示例代码，从空白 Vue 项目开始）。
对于项目更合适
# 选择跳过 → 干净的空白项目
src/
├── App.vue # 干净的根组件
├── main.ts # 入口文件
├── components/ # 空组件目录
├── views/ # 空视图目录
└── assets/ # 资源目录
# 不跳过 → 包含示例代码
src/
├── App.vue # 包含示例组件
├── main.ts #
├── components/
│ ├── WelcomeItem.vue # 示例组件
│ └── TheWelcome.vue # 示例组件
├── views/
│ ├── HomeView.vue # 示例页面
│ └── AboutView.vue # 示例页面
└── assets/
└── base.css # 示例样式你需要从头构建特定功能
智能冰箱管理系统有独特的业务需求：
-
✅ 需要自定义的组件结构
-
✅ 特定的页面布局
-
✅ 专业的设计系统
-
✅ 业务相关功能模块
示例代码对你没帮助
默认示例包含：
-
欢迎页面
-
关于页面
-
基本导航示例
-
示例组件
选择跳过的好处
1. 项目结构更清晰
# 你可以按业务需求组织
src/
├── features/ # 功能模块
│ ├── food/ # 食品管理
│ ├── fridge/ # 冰箱状态
│ └── shopping/ # 购物清单
├── shared/ # 共享组件
├── layouts/ # 布局组件
└── App.vue # 自定义根组件2. 没有不必要的依赖
// 不需要删除示例代码
// 不需要修改示例路由
// 不需要清理示例样式3. 完全掌控代码质量
// 你可以从第一天开始：
- 按业务需求编写组件
- 建立适合项目的代码规范
- 添加项目特定的工具函数
- 设计专业的 UI/UX如果你不跳过会怎样？
需要手动清理：
1. 删除 components/WelcomeItem.vue
2. 删除 components/TheWelcome.vue
3. 删除 views/HomeView.vue
4. 删除 views/AboutView.vue
5. 修改 router/index.ts
6. 修改 App.vue
7. 可能修改样式文件这大概需要：
-
10-15 分钟清理时间
-
可能遗漏某些引用
-
需要测试确保没报错
特殊情况：什么时候不应该跳过？
如果以下情况，可以不跳过：
-
你是 Vue 3 完全新手
-
想快速看看项目结构示例
-
需要参考如何组织组件
-
项目是学习/实验性质
不跳过，带示例代码的 Vue
目录结构
相关工具已安装
接下来按照提示即可
bash
Scaffolding project in /home/mumu/projects/SmartFridgeManager...
│
└ Done. Now run:
cd SmartFridgeManager
pnpm install
pnpm format
pnpm dev
| Optional: Initialize Git in your project directory with:
git init && git add -A && git commit -m "initial commit"
mumu@MuJinqiu:~/projects$ 提示 pnpm 有更新
bash
Update available! 10.24.0 → 10.26.2. │
│ Changelog: https://pnpm.io/v/10.26.2 │
│ To update, run: pnpm add -g pnpm
bash
Ignored build scripts: cypress, esbuild. │
│ Run "pnpm approve-builds" to pick which dependencies should be │
│ allowed to run scripts. 访问新项目
空白项目
目录结构
补充：Git 绑定 vsCode
直接在 vsCode 中上传/更新代码到 Git，如果登录过期会弹框提示登录或绑定。
