vue-typescript-patterns.mdc 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. # Vue3 + TypeScript 开发规范
  2. ## Vue 组件规范
  3. - 使用 Composition API 和 `<script setup>` 语法
  4. - 组件文件使用 PascalCase 命名
  5. - 页面文件放在 `src/pages/` 目录下
  6. - 组件文件放在 `src/components/` 目录下
  7. ## TypeScript 规范
  8. - 严格使用 TypeScript,避免使用 `any` 类型
  9. - 为 API 响应数据定义接口类型
  10. - 使用 `interface` 定义对象类型,`type` 定义联合类型
  11. - 导入类型时使用 `import type` 语法
  12. ## 状态管理
  13. - 使用 Pinia 进行状态管理
  14. - Store 文件放在 `src/store/` 目录下
  15. - 使用 `defineStore` 定义 store
  16. - 支持持久化存储
  17. ## 示例代码结构
  18. ```vue
  19. <script setup lang="ts">
  20. import { ref, onMounted } from 'vue'
  21. import type { UserInfo } from '@/types/user'
  22. const userInfo = ref<UserInfo | null>(null)
  23. onMounted(() => {
  24. // 初始化逻辑
  25. })
  26. </script>
  27. <template>
  28. <view class="container">
  29. <!-- 模板内容 -->
  30. </view>
  31. </template>
  32. <style lang="scss" scoped>
  33. .container {
  34. // 样式
  35. }
  36. </style>
  37. ---
  38. globs: *.vue,*.ts,*.tsx
  39. ---