2.6 KiB
2.6 KiB
name, description, disable-model-invocation
| name | description | disable-model-invocation |
|---|---|---|
| vue2-element-dev | Use when implementing or modifying Vue2 + Element UI pages/components in this repository, especially for list pages, form dialogs, API integration, route/menu wiring, and pre-delivery checks. | true |
Vue2 Element Dev
适用场景
- 新增或修改
src/views下的页面（列表、表单、弹窗） - 新增或修改
src/components下的复用组件 - 做接口联调、参数映射、提交与回显
- 做路由接入、导航菜单接入、权限相关入口调整
项目默认约定（平衡型）
- 优先复用现有模式：先参考同目录页面写法，再补差异
- 命名可读：页面目录、组件名、方法名优先语义化
- 数据分层：查询参数、表单数据、UI 状态分开管理
- 接口调用单点化：统一放到
src/api/*.js，页面仅做调用和状态处理 - 样式就近维护：页面样式写在组件内，避免全局污染
页面开发流程
- 先找一个同类型页面作为参考（表格页/配置页/弹窗页）
- 搭出页面骨架：筛选区、操作区、表格区、分页区
- 补齐数据结构：
list、loading、query、pagination - 接入接口：查询、重置、增删改、状态切换
- 完成交互反馈：确认弹窗、成功提示、失败兜底
- 执行构建或 lint 验证，修复明显问题后再交付
推荐代码组织
data- 查询模型：
queryForm - 列表模型：
tableData - 状态模型：
loading/dialogVisible/submitLoading
- 查询模型：
computed- 放衍生值，不放有副作用逻辑
methodsfetchList：统一列表查询入口handleSearch/handleResethandleAdd/handleEdit/handleDeletehandleSubmit：表单提交统一出口
接口联调约定
- API 文件里维护请求函数，页面中只做调用
- 参数透传前做必要整形（时间范围、数字布尔转换）
- 提交前做前端必填校验；提交后统一提示
- 失败场景要收敛：关闭 loading、保留用户输入、提示可理解信息
路由与菜单接入约定
- 新页面需要补路由入口与导航入口
- 菜单文案与页面标题保持一致，避免多处命名不一致
- 权限字段沿用现有规则，不自创新字段名
交付前最低检查
- 页面可正常进入，主流程可跑通（查、增/改、删）
- 列表页分页/筛选联动正常
- 弹窗表单可回显、可校验、可提交
- 无明显控制台报错，构建或 lint 不出现新增阻断错误
快速参考
- 详细示例：见 examples.md
- 提交前清单：见 checklist.md