62 lines
2.5 KiB
Plaintext
62 lines
2.5 KiB
Plaintext
---
|
||
description: >
|
||
Vue 3 组件脚手架技能。新建 Vue SFC 组件、拆分子组件、
|
||
创建复合组件时激活。含模板生成、命名规范、Prop 设计。
|
||
globs:
|
||
- "**/components/**/*.vue"
|
||
- "**/composables/**/*.ts"
|
||
alwaysApply: false
|
||
---
|
||
|
||
# Component Scaffold
|
||
|
||
> 本文件是精简执行摘要。完整流程、模板和深度参考见：
|
||
> Read `.cursor/skills/component-scaffold/SKILL.md`
|
||
|
||
> **适用性**（双模式）：
|
||
> - **新建**组件/重大拆分：走完整执行流程（Step 1-7）
|
||
> - **修改**已有组件：跳过脚手架步骤，完成后走「验证」清单
|
||
|
||
依赖技能：`vue-testing`（Cursor 已通过 `skill-vue-testing` 规则自动加载）
|
||
|
||
## 前端识别（必须先确认）
|
||
|
||
- **管理端** (`Case-Database-Frontend-admin/`)：Element Plus + Tailwind
|
||
- **用户端** (`Case-Database-Frontend-user/`)：Headless UI + Tailwind，**禁止 Element Plus**
|
||
|
||
## 执行流程
|
||
|
||
1. 加载规范：Read `010-typescript.mdc`、`011-vue.mdc`、`019-modular.mdc`
|
||
2. 扫描 `src/components/core/` 和 `src/components/custom/`，避免重复造轮子
|
||
3. 重复 UI 检测：同一结构 >=3 次 → 提取基础组件
|
||
4. **输出文件结构**（写代码前必须先输出）：
|
||
```
|
||
src/components/<type>/<ComponentName>/
|
||
├── <ComponentName>.vue (行数限制见 011-vue.mdc)
|
||
├── <ComponentName>.test.ts
|
||
└── index.ts
|
||
```
|
||
5. 确认组件规格（名称、类型、目录、Props/Emits）
|
||
6. 生成组件代码（`<script setup lang="ts">` + `defineProps`）
|
||
7. 生成测试和 barrel export
|
||
|
||
## 质量约束
|
||
|
||
行数限制和设计决策树已下沉到 `011-vue.mdc`（编辑任何 .vue 文件时自动生效），
|
||
此处不再重复。脚手架生成的组件同样受 `011-vue.mdc` 约束。
|
||
|
||
## 验证
|
||
|
||
- [ ] Props 使用对象语法 `defineProps({ key: { type, default } })`；**script 中若不访问 `props.xxx` 则不保存返回值**（直接写 `defineProps(...)` 而非 `const props = defineProps(...)`，避免 `unused-vars` lint 报错）
|
||
- [ ] **`catch` 块中不使用异常参数时写 `catch {}` 而非 `catch (e) {}`**，避免 `unused-vars` 报错
|
||
- [ ] 包含 `data-testid`
|
||
- [ ] 测试至少一个渲染测试
|
||
- [ ] barrel export 正确
|
||
- [ ] 符合 `011-vue.mdc` 的 SFC 行数限制和设计决策规则
|
||
- [ ] composable 参数有类型注解、ref 有泛型
|
||
|
||
## 深度参考
|
||
|
||
- `.cursor/skills/component-scaffold/references/component-templates.md`
|
||
- `.cursor/skills/component-scaffold/references/naming-conventions.md`
|