一次完整的現代前端項目搭建經歷，踩坑與收獲并存

?? 前言

最近創建了一個新的 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