frontend-vben-page
Installation
SKILL.md
vue-vben-admin 页面开发规范
本项目遵循 vue-vben-admin v5 的设计哲学,提倡配置化与模块化分离的设计理念,将"纯视图"与"表格/表单配置层"区分开。
页面组织结构
典型的复杂列表 CRUD 页面应分为如下形式放置在 apps/web-antd/src/views/{模块}/{子模块}/下:
user/
├── index.vue # 列表主视图 (页面主入口,引用表格)
├── data.ts # 包含静态和动态的 FormSchema 与 Column 配置
└── modules/ # 对话框、Drawer 或拆分出的业务子组件
├── form.vue # 新增/编辑弹窗组件
├── assign-role-form.vue # 分配角色弹窗
└── import-form.vue # 数据导入弹窗
数据分离与 data.ts
不要将包含大量具体字段声明(Schema、Columns)硬编码在 .vue 的 script 块中。
Related skills
More from kevinqpeng/proxy-skills
proxy-backend-api-design
>-
6proxy-backend-database
>-
5proxy-backend-global
>-
4proxy-backend-impl-workflow
>-
4frontend-api
前端 API 对接规范,包含文件存放结构、requestClient 请求封装、namespace 类型定义、接口方法命名约定。适用于基于 vue-vben-admin v5 + @vben/request 的项目。当需要新建或修改 API 文件、定义接口类型、调用后端接口时使用此技能。
2proxy-app-global
Proxy2.0 移动端全局编码规范:uni-app + Vue 3 项目结构、命名规范、组件规范、API 封装、Store 管理、页面路由、多端适配。Use when: (1) Creating or modifying any code in proxy2.0-app project, (2) Writing pages, components, API files, or store modules, (3) Configuring pages.json or manifest.json, (4) Working with uni-app multi-platform features (H5/小程序/App), (5) Following project structure and coding standards.
2