SuperAPI AI 工具集

vue-element

前端与建站

查看项目

更新于 10-16 05:07

技能介绍

该技能是一套 Vue3 管理后台开发规范,触发场景包括开发 Vue3 后台项目、实现 CRUD 页面、使用 Element Plus 组件、实现权限管理以及创建自定义组件。

技术栈约定为 Vue、Element Plus、TypeScript、Vite、Pinia、Vue Router 与 Axios。目录结构按 api、components、composables、directives、enums、hooks、layout、router、stores、styles、utils、views 等模块组织;API 进一步按系统模块划分并区分 index.ts 与 types.ts。

命名规范区分文件、变量与方法:组件用 PascalCase、页面用 kebab-case、组合式函数用 camelCase 加 use 前缀;布尔值使用 is/has/can 前缀;获取用 fetch/load,提交用 submit/save,事件处理仅在流程编排时使用 handle,单一动作用普通动词。CSS 采用 BEM,Block 必须带页面前缀,并给出 header、footer、actions 等标准词汇。

组件规范主张优先使用 el-button、el-input、el-table、el-dialog、el-form 等 Element Plus 组件,资料给出 CRUD 页面模板结构,包括搜索栏、操作栏、数据表格与分页。API 规范给出 Result、PageResult、PageQuery、OptionType 等响应类型,以及按模块组织的 UserAPI 示例。权限控制包含路由守卫、v-permission 指令与 hasPermission 函数两种按钮权限方式。

样式规范采用 BEM 定义语义、UnoCSS 微调、SCSS 处理伪类与动画的分层策略,颜色统一使用 Element Plus 的 --el-* CSS 变量,禁止硬编码;保留 .page-content 布局类,z-index 使用 --z-* 变量,原子类不超过 3 个。另附代码质量检查清单。

使用方式:该技能以规范文档形式提供,未提供安装命令或调用指令,具体触发与集成方式暂未提供。限制方面,资料未说明支持的 Vue 或 Element Plus 具体版本,未提及收费、价格与效果保证;部分规范条目编号不连续(缺少 Part 7),示例代码需按实际项目调整。