hero-admin-ui

What

hero-admin-ui 是一个基于 vue3 和 Element Plus 实现的 PC 管理端 的组件库。

hero-admin-ui 采用的技术栈为：

• vue3.2
• TypeScript
• TSX
• JSON Schema

hero-admin-ui 在Element Plus基础上进行深度封装，提供了多种多样的组件。使用 hero-admin-ui，可以快速实现的企业级中后台管理系统 前端 的功能， 让前端开发人员聚焦于业务之上，统一界面风格，开箱即用。 表单和列表使用 JSON Schema 方式进行配置展示，避免大量 HTML 标签代码。

• 组件库文档地址： https://herocloudy.github.io/hero-admin-ui/
• 组件库demo演示： [待完善]
• HERO Schema 生成器： https://herocloudy.github.io/hero-low-code-frontend/#/schema-gen
• HERO 表单生成器： https://herocloudy.github.io/hero-low-code-frontend/#/form-gen

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： [email protected]

hero_admin_ui 组件的开发教程会在公众号发布，欢迎关注：

程序员优雅哥（youyacoder）