33 lines
894 B
Markdown
33 lines
894 B
Markdown
# 组件命名规范
|
|
|
|
## 文件命名
|
|
|
|
| 类型 | 命名 | 示例 |
|
|
|------|------|------|
|
|
| 组件文件 | PascalCase.vue | `UserProfile.vue` |
|
|
| 测试文件 | PascalCase.test.ts | `UserProfile.test.ts` |
|
|
| 样式文件 | 内联 `<style scoped>` | `UserProfile.vue` |
|
|
| Composable | use + PascalCase.ts | `useUserProfile.ts` |
|
|
| 工具函数 | camelCase.ts | `formatDate.ts` |
|
|
|
|
## Props 接口
|
|
|
|
```typescript
|
|
// ✅ Good: use JSDoc typedef for props-like structure
|
|
/**
|
|
* @typedef {Object} UserProfileProps
|
|
*/
|
|
|
|
// ❌ Bad: ambiguous generic name
|
|
/** @typedef {Object} Props */
|
|
```
|
|
|
|
## 组件类型
|
|
|
|
| 类型 | 目录 | 特征 |
|
|
|------|------|------|
|
|
| UI 组件 | `components/ui/` | 无业务逻辑，纯展示 |
|
|
| Feature 组件 | `components/features/` | 包含业务逻辑 |
|
|
| Layout 组件 | `components/layout/` | 页面布局 |
|
|
| Form 组件 | `components/forms/` | 表单及验证 |
|