vue-typescript-patterns.mdc 1.3 KB

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