64 lines
2.0 KiB
Plaintext
64 lines
2.0 KiB
Plaintext
---
|
||
description: >
|
||
Vue 3 + Vue Router 页面脚手架技能。新建路由页面、
|
||
含布局/加载状态/错误处理时激活。
|
||
globs:
|
||
- "**/router/**/*.ts"
|
||
- "**/views/**/*.vue"
|
||
alwaysApply: false
|
||
---
|
||
|
||
# Vue Page Scaffold
|
||
|
||
> 本文件是精简执行摘要。完整流程、模板和深度参考见：
|
||
> Read `.cursor/skills/vue-page/SKILL.md`
|
||
|
||
> **适用性**（双模式）：
|
||
> - **新建**路由页面：走完整执行流程（Step 1-6）
|
||
> - **修改**已有页面：跳过脚手架步骤，完成后走「验证」清单
|
||
|
||
依赖技能：`vue-testing`（Cursor 已通过 `skill-vue-testing` 规则自动加载）
|
||
|
||
## 前端识别
|
||
|
||
- **管理端**：Element Plus 布局
|
||
- **用户端**：Headless UI + Tailwind，**禁止 Element Plus**
|
||
|
||
## 执行流程
|
||
|
||
1. 加载规范：Read `010-typescript.mdc`、`011-vue.mdc`、`019-modular.mdc`
|
||
2. **生成前强制拆分分析**（写代码前必须输出）：
|
||
- 多视图检测：>=2 个排斥视图 → 每个视图独立组件
|
||
- 行数预估：template > 80 行 → 拆子组件，script > 60 行 → 提取 composable
|
||
- 重复 UI 检测：同一结构 >=3 次 → 提取基础组件
|
||
3. 输出拆分方案：
|
||
```
|
||
src/views/<module>/<page>/
|
||
├── index.vue <= 60 行（编排层）
|
||
├── components/
|
||
│ ├── <ViewA>.vue <= 120 行
|
||
│ └── <ViewB>.vue <= 120 行
|
||
└── composables/
|
||
└── use<PageName>.ts <= 80 行
|
||
```
|
||
4. 确认页面规格（路由路径、标题、模块、类型）
|
||
5. 逐文件生成代码
|
||
6. 配置路由（path、name、component 懒加载、meta）
|
||
|
||
## 页面类型
|
||
|
||
list | detail | form | dashboard | blank | multi-view
|
||
|
||
## 验证
|
||
|
||
- [ ] 页面正常渲染，document.title 正确
|
||
- [ ] Loading 骨架屏 + 错误提示
|
||
- [ ] meta.requiresAuth、meta.permission
|
||
- [ ] index.vue <= 60 行
|
||
- [ ] 无子组件超过 150 行
|
||
- [ ] composable 参数有类型注解、ref 有泛型
|
||
|
||
## 深度参考
|
||
|
||
- `.cursor/skills/vue-page/references/page-templates.md`
|