实用篇：vsCode 中连接 WSL 并快速开始一个 Vue3 新项目

本文介绍了使用pnpm创建Vue3项目的完整流程。首先配置WSL前端开发环境通过VS Code连接WSL远程开发。使用pnpm创建包含TypeScript、Vue Router、Pinia、ESLint和Prettier的Vue3项目。详细分析了JSX和模板语法的适用场景建议业务应用使用模板语法。介绍了Vitest单元测试框架和E2E测试的重要性特别适合管理系统这类复杂应用。最后讨论了实验性功能Oxlint和rolldown-vite的选择建议推荐新手选择稳健方案。整个过程从环境配置到项目初始化为开发者提供了完整的Vue3TypeScript开发环境搭建指南。快速开始第一步开始创建pnpm create vuelatest SmartFridgeManager -- --typescript --router --pinia --eslint --prettier第二步配置项选择配置项选择TypeScript是JSX Support否RouterSPA development是Piniastate management是Vitestunit testing是End-to-End Testing选择 CypressESLintErrorprevention是PrettierCodeformatting是实验性功能Oxlint否Vite 8beta否创建空白模板Skip all example code and start with a blank Vue project?是第三步初始化项目cd myVueDemo pnpm install pnpm format pnpm dev正在初始化项目 D:\Vue3\SmartFridgeManager... │ └ 项目初始化完成可执行以下命令 cd SmartFridgeManager pnpm install pnpm format pnpm dev | 可选使用以下命令在项目目录中初始化 Git git init git add -A git commit -m initial commit第四步访问项目根据终端输出的地址在浏览器访问项目。第三步可能的输出mumuMuJinqiu:~/projects$ cd zheye mumuMuJinqiu:~/projects/zheye$ pnpm install Progress: resolved 25, reused 25, downloaded 0, added 0 WARN Request took 14463ms: https://registry.npmjs.org/vue%2Feslint-config-typescript WARN Request took 18202ms: https://registry.npmjs.org/typescript-eslint%2Fparser WARN Request took 15640ms: https://registry.npmjs.org/tldts-core WARN Request took 12411ms: https://registry.npmjs.org/vue%2Fcompiler-sfc Progress: resolved 615, reused 564, downloaded 2, added 0 WARN Request took 81205ms: https://registry.npmjs.org/electron-to-chromium Packages: 568 Progress: resolved 617, reused 566, downloaded 2, added 568, done zheye0.0.0 prepare /home/mumu/projects/zheye cypress install Installing Cypress (version: 15.8.2) ✔ Downloaded Cypress ✔ Unzipped Cypress ✔ Finished Installation /home/mumu/.cache/Cypress/15.8.2 You can now open Cypress by running one of the following, depending on your package manager: - npx cypress open - yarn cypress open - pnpm cypress open https://on.cypress.io/opening-the-app dependencies: pinia 3.0.4 vue 3.5.26 vue-router 4.6.4 devDependencies: tsconfig/node24 24.0.3 types/jsdom 27.0.0 types/node 24.10.7 (25.0.7 is available) vitejs/plugin-vue 6.0.3 vitest/eslint-plugin 1.6.6 vue/eslint-config-prettier 10.2.0 vue/eslint-config-typescript 14.6.0 vue/test-utils 2.4.6 vue/tsconfig 0.8.1 cypress 15.8.2 eslint 9.39.2 eslint-plugin-cypress 5.2.1 eslint-plugin-vue 10.6.2 jiti 2.6.1 jsdom 27.4.0 npm-run-all2 8.0.4 prettier 3.7.4 start-server-and-test 2.1.3 typescript 5.9.3 vite 7.3.1 vite-plugin-vue-devtools 8.0.5 vitest 4.0.17 vue-tsc 3.2.2 ╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮ │ │ │ Ignored build scripts: cypress, esbuild. │ │ Run pnpm approve-builds to pick which dependencies should be allowed to run scripts. │ │ │ ╰────────────────────────────────────────────────────────────────────────────────────────────╯ Done in 5m 14.1s using pnpm v10.24.0 mumuMuJinqiu:~/projects/zheye$ pnpm format zheye0.0.0 format /home/mumu/projects/zheye prettier --write --experimental-cli src/ mumuMuJinqiu:~/projects/zheye$ pnpm dev zheye0.0.0 dev /home/mumu/projects/zheye vite VITE v7.3.1 ready in 554 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window ➜ Vue DevTools: Press Alt(⌥)Shift(⇧)D in App to toggle the Vue DevTools ➜ press h enter to show help以下为详解环境配置参考前端开发环境WSLNode.js pnpm配置过程错误及解决附初始化一个 Vue 3 测试项目打开 vsCode 连接 WSL 远程直接点击连接到》打开文件夹》找到你的项目根目录在查看里面打开终端现在显示的就是整个项目根目录。可以在这里新建项目。使用 pnpm 创建 Vue 3 项目pnpm create vuelatest SmartFridgeManager -- --typescript --router --pinia --eslint --prettier说明SmartFridgeManager是项目名称所有需要的特性都包含在一个命令中--typescriptTypeScript 支持--routerVue Router--pinia状态管理--eslint代码检查--prettier代码格式化执行后需要进入项目目录cd SmartFridgeManager安装依赖pnpm install启动开发服务器pnpm dev这样创建的项目将包含完整的 Vue 3 TypeScript 开发环境并配置了 ESLint 和 Prettier 进行代码格式化。开始新建项目pnpm create vuelatest SmartFridgeManager -- --typescript --router --pinia --eslint --prettier提示是否安装的一些选项什么是 JSXJSX 是一种 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 支持Volar5.安装 JSX 支持后如果选择安装 JSX support会添加vue/babel-plugin-jsx或vue/babel-preset-jsx配置支持.jsx和.tsx文件扩展名可以在项目中混合使用.vue和.jsx/.tsx文件6.项目创建时的建议推荐不选 JSX使用 Vue 模板语法更合适理由业务应用通常模板语法足够更易维护除非你有特定需求或团队偏好 JSX7.后续添加即使现在不选以后也可以随时添加 JSX 支持pnpm add vue/babel-plugin-jsx总结除非你有明确的 JSX 需求否则对于大多数 Vue 3 项目特别是业务应用使用默认的模板语法是更好的选择。什么是 VitestVitest是一个基于 Vite 的现代化单元测试框架专为 Vue 3 和现代 JavaScript 项目设计。核心特性1.与 Vite 生态完美集成# 使用相同的配置 vite.config.ts # 开发构建配置 vitest.config.ts # 测试配置可共用vite配置2.极快的速度智能文件监听只运行相关测试并发测试执行几乎零配置启动3.与 Jest 高度兼容// Jest 用户很容易迁移 describe(MyComponent, () { test(should work, () { expect(1 1).toBe(2) }) })在 Vue 3 项目中的用途1.组件单元测试2.组合函数测试3.工具函数测试Vitest vs Jest 对比特性VitestJest速度⚡极快基于 Vite较慢配置简单复用 Vite 配置需要单独配置ESM 支持✅ 原生支持⚠️ 需要配置TypeScript✅ 零配置支持⚠️ 需要 ts-jest热更新✅ 即时更新❌ 较慢生态系统发展中成熟完善浏览器 API✅ 内置 Mock⚠️ 需要 jsdom推荐选择 Vitest因为项目需要可靠的管理逻辑组件交互复杂需要测试Vue 3 Vite 生态完美集成保证应用质量和维护性即使不选后期也可轻松添加pnpm add -D vitest vue/test-utilsVitest 让单元测试变得简单快速特别适合需要高质量保证的智能冰箱管理系统。End-to-End TestingEnd-to-End Testing端到端测试简称 E2E 测试是从用户角度模拟真实使用场景的测试方法测试整个应用程序的完整流程。核心概念1.与单元测试的区别测试类型测试范围关注点速度单元测试单个函数/组件代码逻辑正确性⚡ 快集成测试多个模块交互模块间协作⚡ 中等E2E 测试整个应用流程用户体验/业务流程 慢2.测试金字塔/\ / \ 少量 E2E 测试 /____\ 用户场景验证 / \ /________\ 适量集成测试 / \ 模块间交互 /____________\ 大量单元测试 基础功能验证在 Vue 3 项目中的用途1.测试真实用户流程2.关键业务流程Vue 3 项目中常见的 E2E 工具1.Cypress创建 Vue 项目时默认选项2.Playwright3.PuppeteerE2E 测试的优势1.发现集成问题// 可能发现的问题 - 前端与 API 不匹配 - 路由导航问题 - 认证/授权流程缺陷 - 浏览器兼容性问题 - 移动端响应式问题2.模拟真实用户行为// 真实场景测试 test(用户操作顺序可能出乎意料, async () { // 用户可能后退 → 刷新 → 重复提交 await page.goBack() await page.reload() await page.click(button[typesubmit]) await page.click(button[typesubmit]) // 重复点击 })成本和收益考虑适合 E2E 测试的情况✅ 推荐关键业务路径注册、支付、下单跨组件集成流程用户体验验证发布前的回归测试可能不需要 E2E 测试的情况❌ 可选小型个人项目原型/MVP 阶段没有复杂用户流程资源有限的团队建议选择 E2E 测试因为涉及重要数据操作食品库存、用户数据多步骤流程注册 → 添加食品 → 生成清单跨平台使用Web 移动端 PWA家庭共享功能复杂的权限和同步逻辑如果资源有限可以先测试// 最小化 E2E 测试集 1. 用户注册和登录 2. 添加和管理食品 3. 过期食品提醒 4. 购物清单生成总结End-to-End Testing 是验证应用从用户角度能否正常工作的关键手段。有实际业务流程的应用E2E 测试能确保✅ 用户流程完整可用✅ 不同模块正确集成✅ 数据一致性得到保障✅ 发布前发现重大缺陷建议开始可以选择 CypressVue 项目集成好编写少量关键路径测试随着项目发展逐步增加。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 项目创建时的实验性功能选项。OxlintOxlint 是一个用 Rust 编写的超快速 JavaScript/TypeScript linter旨在替代 ESLint。优势⚡ 极速Rust 编写比 Node.js 的 ESLint 快得多 电池内置开箱即用无需复杂配置 TypeScript 友好对 Vue 3 TypeScript 支持好当前状态✅ 可用于生产⚠️ 生态还在发展中插件比 ESLint 少 部分 Vue 特定规则可能不如 ESLint 完善rolldown-viteRolldown 是用 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 支持良好即使有问题可以随时切换回 ESLintrolldown-vite⚠️建议暂时不选标注为实验性生产构建稳定性重要可以等项目稳定后再考虑最终推荐选择[✓] Oxlint [ ] rolldown-vite (experimental)这样你既能体验现代化的极速 linting又能保持项目构建的稳定性。以后随时可以添加 rolldown 或切换回 ESLint。Skip all example code and start with a blank Vue project?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目录结构相关工具已安装接下来按照提示即可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 mumuMuJinqiu:~/projects$提示 pnpm 有更新Update available! 10.24.0 → 10.26.2. │ │ Changelog: https://pnpm.io/v/10.26.2 │ │ To update, run: pnpm add -g pnpmIgnored build scripts: cypress, esbuild. │ │ Run pnpm approve-builds to pick which dependencies should be │ │ allowed to run scripts.访问新项目空白项目目录结构补充Git 绑定 vsCode直接在 vsCode 中上传/更新代码到 Git如果登录过期会弹框提示登录或绑定。