32 lines
816 B
Markdown
32 lines
816 B
Markdown
|
---
|
||
|
|
name: frontend-web-component
|
||
|
|
description: Web 前台组件规范（Nuxt 4），Element Plus 组件使用与封装
|
||
|
|
globs:
|
||
|
|
- "frontend/web/app/components/**/*.vue"
|
||
|
|
---
|
||
|
|
|
||
|
|
## 组件分类
|
||
|
|
|
||
|
|
| 分类 | 说明 |
|
||
|
|
|------|------|
|
||
|
|
| advertisement/ | 广告组件 |
|
||
|
|
| icon/ | 图标组件 |
|
||
|
|
| login-dialog/ | 登录弹窗 |
|
||
|
|
| search-box/ | 搜索组件 |
|
||
|
|
| seo/ | SEO 组件 |
|
||
|
|
| sms-code/ | 短信验证码 |
|
||
|
|
|
||
|
|
## 关键约定
|
||
|
|
|
||
|
|
- Nuxt auto-imports `components/` 下的所有组件
|
||
|
|
- 组件名与文件名一致（PascalCase）
|
||
|
|
- 公共组件放在 `components/`，页面私有组件放在 `components/{page}/`
|
||
|
|
- 使用 Element Plus 组件时直接使用 `<el-*>` 标签
|
||
|
|
|
||
|
|
## 检查清单
|
||
|
|
|
||
|
|
- [ ] 组件名是否 PascalCase
|
||
|
|
- [ ] 是否利用 Nuxt auto-import
|
||
|
|
- [ ] 是否使用 Composition API
|
||
|
|
- [ ] Props 是否有默认值
|