專案遷移與框架升級
Vue 2→3、Express→Fastify、Webpack→Vite —— OpenClaw 幫你平滑遷移，不用手動踩坑
遷移這件事，誰做誰知道
升級一個框架，踩一百個坑
Vue 2 要升 Vue 3 了。你打開遷移指南，200 多頁。Options API 要改 Composition API，Vuex 要換 Pinia，Vue Router 語法也變了 —— 好，改。
改完發現第三方元件庫不相容了。換了新的元件庫，發現樣式全亂了。修完樣式，跑測試，一半紅的。這還只是前端，後端的 Python 2 轉 3 也在排期呢……
最慘的是，老闆問「這週能搞完嗎？」
OpenClaw：先分析差異，再逐步遷移
把舊專案丟給 OpenClaw，它會：
1. 掃描所有檔案，列出需要改的地方
2. 按優先級排序：先改破壞性變更，再改廢棄 API
3. 逐檔案產生改後的程式碼，附上每處改動的解釋
4. 標出不相容的第三方相依，給出替代方案
你不用一頁頁看遷移指南了。OpenClaw 已經讀過了，而且它知道你的專案裡具體哪些地方需要改。
3 條遷移 Prompt，覆蓋主流場景
前端框架、後端框架、構建工具，各來一條。
Vue 2 → Vue 3 Composition API 遷移
黃金指令
請將這個 Vue 2 專案升級到 Vue 3，要求：
1. 將所有 Options API 元件改寫為 Composition API（script setup 語法）
2. Vuex 狀態管理遷移到 Pinia
3. Vue Router 3 升級到 Vue Router 4（注意路由守衛語法變化）
4. 處理 $listeners、$attrs、filter 等已移除的 API
5. 檢查 Element UI → Element Plus（或其他元件庫）的相容性
按檔案輸出修改內容，每個改動說明原因。
最後列出需要手動確認的第三方相依相容性問題。Vue 2 → 3 是最常見的前端遷移場景。建議用 Claude Opus 4.6，它對 Vue 生態的理解比較準確。大專案按模組分批遷移效果更好。
Express.js → Fastify 遷移
進階技巧
請將這個 Express.js 應用遷移到 Fastify 框架：
1. 路由遷移：Express 的 router 改為 Fastify 的路由註冊方式
2. 中間件遷移：
- body-parser → Fastify 內建
- cors → @fastify/cors
- helmet → @fastify/helmet
- 自訂中間件 → Fastify hooks (onRequest / preHandler)
3. 錯誤處理：Express 的 error middleware → Fastify setErrorHandler
4. 請求/回應物件：req.body / res.json 等 API 差異處理
5. 驗證：joi / express-validator → Fastify 內建 JSON Schema 驗證
保持所有現有 API 介面不變，確保前端無感切換。Express → Fastify 性能提升明顯（通常 2-3 倍），但中間件遷移是重點。這條 Prompt 覆蓋了最常用的中間件對應關係。
Webpack → Vite 遷移
新手友善
請幫我把這個 Webpack 專案遷移到 Vite：
1. 建立 vite.config.ts，對應現有 webpack.config.js 的設定
2. 處理以下常見差異：
- require() → import
- process.env → import.meta.env
- CSS modules / SCSS 設定
- 別名（alias）設定
- 代理（proxy）設定
3. 檢查不相容的 Webpack loader，推薦 Vite 外掛替代
4. 更新 package.json scripts
5. 處理 CommonJS 相依的相容問題
給出遷移後的設定檔和需要修改的原始檔清單。Webpack → Vite 遷移相對簡單，主要是設定遷移。標記為 beginner 是因為大部分改動比較機械，AI 處理起來很穩。
遷移前的準備設定
在讓 OpenClaw 幫你遷移之前，最好先把專案資訊整理好。
專案遷移上下文模板
# 專案遷移資訊
## 當前技術棧
- 框架: Vue 2.7 + Vuex 3 + Vue Router 3
- 構建工具: Webpack 4
- UI 元件庫: Element UI 2.x
- Node 版本: 16.x
## 目標技術棧
- 框架: Vue 3.4 + Pinia + Vue Router 4
- 構建工具: Vite 5
- UI 元件庫: Element Plus 2.x
- Node 版本: 20.x
## 專案規模
- 元件數量: ~80 個
- 頁面數量: ~30 個
- 自訂指令: 5 個
- 自訂 filter: 8 個
## 已知問題
- xxx 元件庫暫無 Vue 3 版本
- 部分程式碼使用了 this.$refs 直接操作 DOMOpenClaw 遷移 vs 手動遷移
OpenClaw 輔助遷移
- 自動掃描所有需要改的地方，不會遺漏
- 按檔案產生修改後的程式碼，複製粘貼就行
- 能解釋每處改動的原因，相當於自帶遷移文件
- 遇到不相容的第三方庫會主動提醒並推薦替代
- 大專案幾天搞定，小專案幾小時搞定
VS
純手動遷移
- 要從頭讀完官方遷移指南（通常幾百頁）
- 逐檔案人工查找和修改，容易漏改
- 遇到問題全靠 Google 和 Stack Overflow
- 第三方庫相容性問題只有跑起來才知道
- 大專案可能要改幾週，中途各種意外
遷移小貼士
大專案遷移千萬別一口氣全改。按模組分批遷移，每批改完跑一遍測試，確認沒問題再繼續下一批。
遷移前一定要確保有完整的測試涵蓋。如果現有測試不夠，先讓 OpenClaw 幫你補測試，再開始遷移 —— 這個順序很重要。