从零开始：Vue 3 + TypeScript 项目创建全记录

一次完整的现代前端项目搭建经历，踩坑与收获并存

📖 前言

最近创建了一个新的 Vue 3 项目，整个过程中遇到了不少有趣的选择和决策点。作为一个技术复盘，我想把这次经历分享出来，希望能帮助到其他开发者，特别是那些刚接触 Vue 3 生态的朋友们。

🛠️ 项目初始化：选择的艺术

第一步：脚手架选择

使用了官方推荐的 npm create vue@latest 命令，这个命令会启动一个交互式的项目配置向导。相比于老版本的 Vue CLI，新的创建方式更加轻量和现代化。

npm create vue@latest my-vue-project

第二步：技术栈选择

在配置过程中，面临了一系列技术选择：

✅ 确定选择的技术

1. TypeScript - 毫不犹豫选择

   • 类型安全，减少运行时错误
   • 更好的 IDE 支持和代码提示
   • 团队协作时代码更易维护

2. Vue Router - 单页应用必备

   • 官方路由解决方案
   • 与 Vue 3 完美集成

3. Pinia - 状态管理的新选择

   • 比 Vuex 更简洁的 API
   • 完美的 TypeScript 支持
   • Vue 3 官方推荐

4. Vitest - 现代化测试框架

   • 基于 Vite，启动速度快
   • 与项目构建工具保持一致

5. Playwright - E2E 测试

   • 跨浏览器测试能力强
   • 微软出品，维护活跃

🤔 纠结的选择

ESLint + Prettier：最终选择了启用

• 优点：代码质量保证，团队协作必备
• 考虑：初学者可能觉得规则严格，但长远来看绝对值得

🔬 实验性功能：勇敢者的游戏

项目创建过程中，遇到了两个实验性功能的选择：

🎯 Oxlint