Helper UI 技术体系介绍(基于Vue 3)
Helper UI 是一套基于工作流的技术体系,它分为:
Helper UI基础组件库
Helper UI扩展组件库
Helper Pro页面模板
Helper UI样式库
Helper SVG Icons
Helper Hooks
Helper Play
UIKIT
灵活可控的主题配置系统
CSS样式生成系统
快速便捷的页面布局组件
前端页面模版库
为设计师提供的Sketch版原子级UI组件库
Helper UI基础组件库是基于Vue3的前端UI组件库,它当前拥有:
文档地址: https://eric-leo.github.io/helper-ui/
安装方式:
npm install helper-ui
或
yarn add helper-ui
或
pnpm add helper-ui
50+个常用基础组件
1套亮色模式主题
1套暗色模式主题
HelperUI Pro页面模板是基于helper 前端组件库生成的一套开箱即用的B端后台类页面模版库,它当前拥有:
文档地址:https://eric-leo.github.io/helper-pro/
40+个通用页面模版
可快速改变页面整体布局样式
可通过配置文件更换主题风格(通过helper UI主题库实现)
等特点,并且在日常工作和业务支撑的过程中不断地更新和完善。
Helper UI扩展组件库是基于helper 前端组件库进行二次封装的组件库,它当前拥有:
文档地址:https://eric-leo.github.io/helper-business-ui/
安装方式:
npm install helper-business-ui
或
yarn add helper-business-ui
或
pnpm add helper-business-ui
树形穿梭框
树形选择器
数据过滤器
表格工具栏
可拖动式对话框
窗口停靠容器
……等15+个常用扩展组件
Helper UI扩展组件库是基于helper 前端组件库helper-ui和helper-business-ui进行二次封装的组件库,它当前拥有:
文档地址:https://eric-leo.github.io/hl-front-framework/
安装方式:
npm install hl-front-framework
或
yarn add hl-front-framework
或
pnpm add hl-front-framework
操作按钮
常用图片、文件上传和查看
数据过滤器
带过滤、分页、tab、搜索条件的表格
适配不同大屏的chart图
……等10+个常用扩展组件
Helper UI主题库包含基于SCSS/CSS实现的各个产线UI规范,它当前拥有:
文档地址:https://www.npmjs.com/package/@helper-ui/styles
安装方式:
npm install @helper-ui/styles
或
yarn add @helper-ui/styles
或
pnpm add @helper-ui/styles
uk2(规范,Pro模板样式)
uk2a(规范,Pro模板样式)
ioc(数字规范,Pro模板样式)
cecloud(云规范,Pro模板样式)
fx(fx规范,Pro模板样式)
visualized(大屏规范,Pro模板样式)
Helper SVG Icons包含300+个SVG图标,提供twotone,fill,file三个系列:
文档地址:https://eric-leo.github.io/helper-icons/
安装方式:
npm install @helper-ui/icons
或
yarn add @helper-ui/icons
或
pnpm add @helper-ui/icons
Helper Play:直接线上运行代码,分享URL即分享代码
文档地址:https://eric-leo.github.io/helper-playground/
文档地址:https://eric-leo.github.io/helper-theme-editor/
目前仅支持:root下变量可视化编辑
支持亮色,暗色,浅蓝色,云 四种主题
前端工具库:项目里常用的函数,TS类型等提炼至 此项目里
文档地址:https://eric-leo.github.io/hl-front-utils/
Helper Hooks包含通用业务的Hooks实现,目前还比较简单:
文档地址:https://eric-leo.github.io/helper-hooks
安装方式:
npm install helper-hooks
或
yarn add helper-hooks
或
pnpm add helper-hooks