vue-typescript

此技能為使用現代 Vue 3 生態系統的開發人員提供了強大的架構框架。它通過強制執行 TypeScript 最佳實踐、響應式狀態管理和模組化程式碼結構，簡化了複雜前端組件的實作過程。無論您是從 Options API 遷移，還是從頭開始構建新的企業級應用程式，此技能都能確保您的程式碼庫遵循清晰且易於維護的模式。它專為前端工程師、全端開發人員以及使用最新 Vue 生態工具的團隊而設計。

• 全面支援 script setup 語法，結合嚴格的 TypeScript 介面與型別定義。

• 進階的組合式函式 (Composables) 開發模式，包含響應式資料獲取、生命週期管理以及自定義 Hook 的創建。

• 與 Pinia 的深度整合，用於可擴展的狀態管理，包含 Store 定義、store-to-refs 解構以及計算屬性 (getters)。

• 標準化的 Vue Router 模式，用於路由定義、延遲加載 (lazy loading) 以及型別安全的參數處理。

• 實作泛型組件以增強跨複雜使用者介面的可重用性。

• 使用 VeeValidate 結合 Zod 的表單處理工作流程，實現基於 Schema 的驗證。

• 務必使用帶有 TypeScript 介面的 defineProps 和 defineEmits，以確保父子組件之間的完全型別安全。

• 使用組合式函式進行跨組件的邏輯共享，以保持組件腳本層的精簡與可讀性。

• 使用 Pinia 時，優先選擇基於 Setup 的 Store 定義，以獲得更好的可組合性與 TypeScript 型別推斷。

• 確保所有路由參數都經過明確定義，以防止在存取路由資料時發生執行階段錯誤。

• 實作複雜表單時，使用 toTypedSchema 實現 Zod 與 VeeValidate 的無縫整合。

• 輸入通常包含組件需求、API 端點規格或業務邏輯工作流程；輸出則為功能完備的 Vue 組件、優化的 Store 以及模組化的工具檔案。