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
Installs
2
First Seen
Mar 13, 2026