hero-admin-ui
Version:
A admin UI framework base on vue3
98 lines (67 loc) • 3.63 kB
Markdown
# 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/](https://herocloudy.github.io/hero-admin-ui/)
- 组件库demo演示： [待完善]
- HERO Schema 生成器： [https://herocloudy.github.io/hero-low-code-frontend/#/schema-gen](https://herocloudy.github.io/hero-low-code-frontend/#/schema-gen)
- HERO 表单生成器： [https://herocloudy.github.io/hero-low-code-frontend/#/form-gen](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： hero_cloudy@126.com
hero_admin_ui 组件的开发教程会在公众号发布，欢迎关注：
**程序员优雅哥（youyacoder）**
