Vue 元件開發規範

--- description: Vue 元件開發規範 globs: *.vue alwaysApply: false --- # Vue 開發規範 ## 元件命名 - 元件名稱應始終使用多字組合，避免與 HTML 元素衝突 - 使用 PascalCase 命名元件：`TodoItem.vue`、`UserProfile.vue` - 基礎元件應使用特定前綴，如 `Base`、`App` 或 `V` - 元件名稱應具有描述性，避免過於簡略 ## 元件結構 - 使用 `` 語法糖 - 使用組合式 API (Composition API) - 組件選項/屬性順序： 1. name 2. components 3. props 4. emits 5. setup() 6. data() 7. computed 8. methods 9. 生命週期鉤子 - 使用單一檔案元件 (SFC) 格式 ## Props 規範 - Prop 名使用 camelCase - Prop 需定義類型和預設值 - 避免使用陣列或物件的預設值，應使用工廠函數傳回預設值 - Prop 應盡可能詳細定義，包括類型、是否必要和驗證函數 ## 事件命名 - 事件名應使用 kebab-case，如 `item-click`、`menu-select` - 自訂事件應具有明確含義，表示發生了什麼 - 避免使用容易混淆的事件名稱 ## 樣式指南 - 優先使用 scoped CSS - 避免使用 !important - 組件特定樣式應具有特定前綴 - 考慮使用 CSS 變數實現主題 ## 效能優化 - 使用 `v-show` 代替 `v-if` 進行頻繁切換 - 長列表使用虛擬滾動 - 避免在計算屬性中進行複雜操作 - 使用 keep-alive 快取元件 - 合理使用非同步組件和懶加載 ## 狀態管理 - 使用 Pinia 進行狀態管理 - store 應依功能模組劃分 - 保持 store 簡單，避免過度設計 ## 路由 - 路由名稱應與元件名稱相符 - 使用懶加載減少初始載入時間 - 路由守衛應簡潔，避免複雜邏輯 ## 通用建議 - 避免使用 `this.$parent` 或 `this.$refs` 直接操作 DOM - 優先使用計算屬性而不是複雜的模板表達式 - 使用 v-for 時必須提供 key - 請勿在同一元素上同時使用 v-if 和 v-for - 重複使用元件時使用 key 確保完全重新渲染