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

📖 前言

最近创建了一个新的 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 - 推荐尝试 ✅

这是一个用 Rust 编写的超高性能 linter，号称比 ESLint 快 50-100 倍。

为什么选择它？

• 性能提升显著，特别是大型项目
• 与 ESLint 规则兼容性好
• 已经发布 1.0 稳定版，相对成熟

实际体验：
代码检查速度确实快了很多，几乎是瞬间完成，开发体验提升明显。

⚡ rolldown-vite - 谨慎选择 ⚠️

这是 Vite 未来计划集成的 Rust 驱动打包器。

为什么没选？

• 仍在实验阶段，稳定性未知
• 可能存在兼容性问题
• 对于学习项目风险较高

建议：等技术更成熟后再考虑。

📝 开发工具配置

package.json 脚本解读

创建完成后，项目自动生成了几个有用的 npm 脚本：

{
  "scripts": {
    "dev": "vite",              // 开发服务器
    "build": "vue-tsc && vite build",  // 构建生产版本
    "preview": "vite preview",   // 预览构建结果
    "test:unit": "vitest",      // 单元测试
    "test:e2e": "playwright test", // E2E测试
    "format": "prettier --write .", // 代码格式化
    "lint": "eslint . --fix"    // 代码检查和修复
  }
}

🎨 npm run format 的魔力

这个命令的作用经常被忽视，但它是团队协作的利器：

主要功能：

• 统一代码缩进和换行
• 规范引号和分号使用
• 控制代码行长度
• 整理空行和空格

实际效果：

// 格式化前
const user={name:'John',age:25}
if(user.age>18){console.log('成年人')}

// 格式化后
const user = {
  name: 'John',
  age: 25
}

if (user.age > 18) {
  console.log('成年人')
}

🏗️ 项目结构一览

创建完成后的项目结构清晰明了：

my-vue-project/
├── src/
│   ├── components/     # 组件目录
│   ├── router/        # 路由配置
│   ├── stores/        # Pinia 状态管理
│   ├── views/         # 页面组件
│   └── main.ts        # 入口文件
├── tests/             # 测试文件
├── public/            # 静态资源
└── 配置文件们...

💡 经验总结

✅ 做得对的地方

1. 选择 TypeScript：虽然学习成本高一点，但收益巨大
2. 启用代码检查：ESLint + Prettier 组合，代码质量有保障
3. 尝试新技术：Oxlint 的性能提升确实明显
4. 完整的测试配置：单元测试 + E2E 测试，质量保证

🤔 可以改进的地方

1. 实验性功能要谨慎：rolldown-vite 暂时跳过是明智的
2. 团队规范要提前定：代码风格、提交规范等
3. 文档要跟上：README 和技术文档要及时更新

🎯 给新手的建议

1. 不要害怕 TypeScript：是的，一开始会有点复杂，但绝对值得
2. 代码格式化很重要：npm run format 要经常用
3. 测试不是负担：从一开始就写测试，后面会感谢自己
4. 新技术要评估：不是所有新技术都适合立即上生产

🚀 下一步计划

项目搭建完成后，接下来的重点：

1. 完善基础组件库：按钮、表单、布局等
2. 配置开发环境：VS Code 插件、调试配置
3. 建立开发规范：Git 提交规范、代码审查流程
4. 性能优化准备：懒加载、代码分割等

🎉 结语

整个项目创建过程虽然选择很多，但每一个决策都有其考量。现代前端开发的工具链确实复杂，但也正是这些工具让我们能够构建更高质量的应用。

对于刚入门的朋友，我的建议是：不要被选择恐惧症困扰，先动手做起来，在实践中学习和调整。

技术在不断发展，工具在不断更新，但解决问题的思路和方法是相通的。希望这次复盘能给大家一些参考和启发！

---

如果你也在搭建 Vue 3 项目，遇到了什么问题或有什么心得，欢迎在评论区分享交流！ 💬