Package Exports
- hero-admin-ui
- hero-admin-ui/dist/hero-admin-ui.common.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hero-admin-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme

hero-admin-ui
What
hero-admin-ui 是一个基于 vue3 和 Element Plus 实现的 PC 管理端 的组件库。
hero-admin-ui 采用的技术栈为:
vue3.2TypeScriptTSXJSON Schema
hero-admin-ui 在Element Plus基础上进行深度封装,提供了多种多样的组件。使用 hero-admin-ui,可以快速实现的企业级中后台管理系统 前端 的功能,
让前端开发人员聚焦于业务之上,统一界面风格,开箱即用。 表单和列表使用 JSON Schema 方式进行配置展示,避免大量 HTML 标签代码。
- 组件库文档地址: https://herocloudy.github.io/hero-admin-ui/
- 组件库demo演示: [待完善]
Why
Vue3 + TypeScript
基于 Vue3 和 TypeScript,强类型约束,规范输入输出类型。
JSON Schema
通过 JSON Schema 配置展示表单和列表,避免各种复杂标签嵌套。
开箱即用
提供丰富的高级组件,开箱即用,让开发人员专注于业务开发
Feature
Hero admin ui 提供的组件包括三大类:
- 基础通用组件
- 高级通用组件
- 业务通用组件
基础通用组件
基础通用组件是一系列中后台前端常使用、但 Element Plus 中没有提供的组件,如:
- 布局组件(可快速实现主界面布局)
- 图标列表组件(可用于选择图标)
- svg图标组件(可快速使用本地svg)
- 全屏组件
- 切换左侧菜单收缩展开组件
- 顶部用户下拉选组件
- 站点信息组件
- 面包屑组件
- 顶部搜索组件
- 页面页签组件
- 页面视图组件
- 高级卡片容器组件
- 描述列表(基于JSON Schema)
高级通用组件
高级通用组件部分针对基础通用组件及 Element-Plus 组件进行二次封装,便于快速实现业务需求,如:
- 头部组件(在主界面头部展示站点信息、用户信息、全屏按钮等)
- 左侧组件(在主界面左侧展示站点信息、菜单等)
- 表单组件(基于 JSON Schema 快速实现表单)
- 列表组件(基于 JSON Schema 快速实现列表)
- 表单卡片组件(对表单组件的封装,放置于卡片中,支持编辑和查看模式)
- 列表卡片组件(对列表组件的封装,放置于卡片中,支持编辑和查看模式)
业务通用组件
业务通用组件采用配置方式,快速实现业务,如:
- 搜索页面组件
- 详情页面组件
About Me
在使用过程中有任何问题可联系作者:
- Author: Hero Cloudy
- Email: hero_cloudy@126.com
hero_admin_ui 组件的开发教程会在公众号发布,欢迎关注:sunshine_talk
