🚀 AI 提示詞最佳實踐：Vue3 / Nuxt3 開發與除錯指南
在現代前端開發中，AI 已成為提高效率的強大工具。然而，如何精準地向 AI 提問，是釋放其潛能的關鍵。這份指南將提供一系列針對 Vue3 和 Nuxt3 的提示詞範本，涵蓋從基礎除錯到進階功能開發，幫助你更高效地解決問題與建構應用。
🎯 提問核心原則
無論是除錯還是開發新功能，遵循以下三大原則能讓 AI 提供的答案更精準、更有用：
提供完整上下文：不只是貼上程式碼，還需說明專案環境（Vue 版本、Nuxt 版本、TypeScript）、相關套件與檔案路徑。
明確描述問題與期待：清楚描述「我做了什麼」、「發生了什麼（實際行為）」以及「我希望發生什麼（期待行為）」。
結構化你的提問：使用條列式或範本格式，讓 AI 快速解析你的需求，避免遺漏關鍵資訊。
🐞 除錯提示詞範本 (Debug)
當你遇到錯誤時，請盡可能提供完整的錯誤訊息和相關程式碼，這能大幅縮短除錯時間。
1. 錯誤訊息分析
這是最常見的除錯場景，請將所有資訊都包含進去。
範本：
我在 Nuxt 3 專案中遇到以下錯誤，請幫我分析並提供修正建議。
- **環境**：Nuxt 3, Vue 3, Node v[填寫版本], 套件 [例如 Pinia, Vue Router]
- **錯誤訊息**：
[貼上完整錯誤訊息與堆疊追蹤]
- **相關程式碼**：
```vue
[貼上觸發錯誤的程式碼片段]
期待行為：[描述你希望程式執行的結果]
實際行為：[描述實際發生的結果，例如畫面空白、資料未顯示]
請提供：
錯誤原因分析
修正程式碼建議
避免同類問題的預防措施
### 2. 元件渲染與響應式問題
當元件資料未更新或畫面顯示異常時，這個範本很有幫助。
**範本：**
我在 Vue 3 / Nuxt 3 元件中遇到渲染問題，請幫我檢查。
程式碼：
程式碼片段[貼上元件完整程式碼]問題描述：[例如響應式資料未更新、v-for 渲染異常]
環境：Vue 3, Nuxt 3, [是否使用 Composition API 或 Options API]
請檢查：
是否有
reactive/ref/computed使用錯誤是否有生命週期或模板語法問題
提供修正後的程式碼範例
---
## ⚙️ 新功能開發提示詞範本 (New Feature)
當你需要建立新功能或程式碼骨架時，請詳細描述需求與檔案結構，讓 AI 提供的程式碼能直接用於你的專案。
### 3. 動態列表與詳細頁
這是常見的 CRUD (增查改刪) 應用情境，此範本能讓你快速建立資料顯示頁面。
**範本：**
請幫我在 Nuxt 3 專案中建立「產品列表頁」與「產品詳細頁」。
需求：
列表頁：
檔案路徑：
pages/products/index.vue使用
useAsyncData從/api/products抓取資料列表顯示產品
name與price點擊列表項目導向
/products/[id]
詳細頁：
檔案路徑：
pages/products/[id].vue使用動態路由參數
id，從/api/products/[id]抓取單一產品資料頁面顯示產品
name、description若產品不存在，導向 404 頁面
環境：Nuxt 3, [是否使用 TypeScript]
請提供：
兩個頁面的完整程式碼 (
index.vue與[id].vue)簡單的載入中 (
pending) 與錯誤處理邏輯程式碼註解，解釋資料抓取與路由處理的核心邏輯
### 4. 狀態管理 (Pinia)
Pinia 是 Vue3 的官方推薦狀態管理工具。
**範本：**
請幫我在 Nuxt 3 專案中建立一個 Pinia Store。
需求：
Store 名稱：
useAuthStore狀態 (State)：
user(物件，包含id,name),isLoggedIn(布林)動作 (Actions)：
login(credentials)，呼叫/api/login成功後更新user與isLoggedIn取得器 (Getters)：
isUserAdmin，回傳使用者是否為管理者支援 TypeScript
檔案路徑：stores/auth.ts
請提供：
stores/auth.ts的完整程式碼在 Vue 元件中使用此 Store 的範例
---
## 🚀 進階應用提示詞範本 (Advanced)
### 5. 伺服器端 API 路由 (Nitro)
Nuxt 3 的伺服器引擎 **Nitro** 讓你能在專案內建構後端 API。
**範本：**
請幫我在 Nuxt 3 專案中建立一個伺服器端 API 路由。
需求：
API 路由：
/api/users處理 GET 請求，回傳一個包含使用者資料的 JSON 陣列
資料模擬：返回至少三個使用者物件，每個物件包含
id,name,email支援 TypeScript
檔案路徑：server/api/users.get.ts
請提供：
server/api/users.get.ts的完整程式碼簡單說明伺服器路由的工作原理
### 6. 第三方套件整合
將常用的 JavaScript 函式庫整合進 Nuxt 專案。
**範本：**
請幫我在 Nuxt 3 專案中整合 [套件名稱]。
需求：
套件：[例如
Day.js]目的：[例如處理日期格式化]
整合方式：在全域可用，並建立一個
$day輔助函式
環境：Nuxt 3, TypeScript
請提供：
完整的 Plugin 程式碼 (
plugins/[plugin-name].ts)在 Vue 元件中使用此輔助函式的範例
---
## 💡 使用技巧與提醒
* **分層架構**：善用 Nuxt 3 的目錄結構。**`composables`** 封裝可重複使用的邏輯，**`plugins`** 整合外部套件，**`middleware`** 處理路由權限，**`server`** 處理後端邏輯。
* **效能考量**：若遇到效能問題，請明確詢問 AI 關於 **Lazy Loading**、**資料預取** (`useAsyncData`) 或 **靜態網站生成** 的建議。
* **TypeScript 支援**：若你的專案使用 TypeScript，務必在提示詞中明確註明，AI 會提供更嚴謹的程式碼與型別定義。
這份指南不僅是提示詞的集合，更是一個思考框架。當你下次遇到問題時，不妨先依照這些範本組織你的思緒，你會發現與 AI 的互動將變得更有效率。
---
希望這份文章對你的 Vue3/Nuxt3 開發工作有所幫助！如果你有任何需要補充或優化的部分，隨時告訴我。
沒有留言:
張貼留言