我用 3 個週末重構了公司的前端專案，老闆沒發現，但同事都來找我要程式碼了
先聲明：重構是在業務空窗期做的，沒耽誤正常迭代。別學我偷偷幹，最好提前報備。公司專案是一個 3 年前的 Vue2 後台系統，程式碼量不大（50 多個頁面），但「歷史悠久」——經歷了 4 任前端，風格各異，沒有 TypeScript，沒有元件庫規範，console.log 滿天飛。
我花了 3 個週末（週五晚上 + 週六全天），把它升級到了 Vue3 + TS + Vite。不是炫技，是真的被折磨夠了。
第一週：搭骨架，解決「能跑」的問題
先用 @vue/cli 的遷移工具跑了一遍，發現只能解決 30% 的問題。剩下的手動改：
- Options API → Composition API：這個最痛苦。有些元件邏輯散落在 data、computed、methods 裡，重構時要先理清楚邏輯關係。我的策略是：先不改邏輯，只改寫法，保證行為一致。
- Vue Router 3 → 4：主要是
router.addRoutes被廢棄了，改成router.addRoute。還有導覽守衛的寫法有變化，但不大。 - Vuex → Pinia：這個反而是最爽的。Pinia 的 TypeScript 支援好太多，不用寫那麼多型別宣告。
週末兩天改了 20 個頁面，週一來公司測試，發現有個頁面的表單提交後沒反應。除錯了半天，發現是 v-model 在 Vue3 裡的預設行為變了——.sync 修飾符被移除，我漏改了一個地方。
教訓：遷移指南要逐條核對，不能憑記憶。
第二週：上 TypeScript，解決「可靠」的問題
Vue3 對 TS 的支援好了很多，但還是有坑：
- defineComponent 的 props 型別：我習慣用介面定義 props，但發現如果介面裡有可選屬性，模板裡用的時候會報錯。最後改成用
PropType明確宣告，或者直接用withDefaults。 - ref 的泛型推導：
ref(null)預設推導成Ref<null>，如果後面賦值物件會報錯。必須明確寫ref<User | null>(null)。 - 第三方套件的型別：有些老套件沒有
@types，要自己寫.d.ts。我攢了一個shims-custom.d.ts，專門放這些。
最爽的時刻：改完後 IDE 的自動提示終於正常了，之前寫程式像瞎子摸象，現在像開了天眼。
第三週：工程化優化，解決「好維護」的問題
- ESLint + Prettier + Husky：以前程式碼風格看當天心情，現在提交前自動格式化。我配了個比較寬鬆的規則，太嚴格會打擊積極性。
- 元件自動引入：用
unplugin-vue-components，不用手動 import 元件。但要注意，如果元件名衝突（比如自訂的 Button 和 Element Plus 的 Button），要明確指定。 - 環境變數管理：把開發、測試、正式環境的 API 位址、埋點 key 都抽出來，用
.env檔案管理。以前這些硬編碼在程式碼裡，改一次發一版，現在改設定就行。
同事為什麼來找我要程式碼？
重構完第二週，隔壁組也要升級 Vue3，他們組長直接來拷貝我的設定。我說：「其實掘金上有更好的方案……」他說：「你的能跑，我就要你的。」
真實。
重構的價值，不是技術多先進，是「能落地」
我現在覺得，前端工程化的最佳實踐，不是用最新技術，是讓團隊裡水平最差的人也能寫出合格的程式碼。ESLint 是防呆的，TypeScript 是防錯的，自動化工具是省時間的。
最後貼一下我的 package.json 關鍵依賴版本（供參考）：
JSON
{
"vue": "^3.4.0",
"vite": "^5.0.0",
"typescript": "^5.3.0",
"pinia": "^2.1.0",
"vue-router": "^4.2.0"
}想問問大家：
你們公司的專案是什麼技術棧？有沒有也在考慮升級 Vue3 的？或者已經踩過坑的，歡迎分享，我幫你避雷。
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
