HiUI 中后台组件库快速上手指南5 分钟搭出标准业务界面【免费下载链接】hiuiHIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend.项目地址: https://gitcode.com/gh_mirrors/hi/hiuiHiUI 是一套基于 React 的中后台组件库覆盖 Table、Form、Select、DatePicker 等 82 个组件并配套 28 个 hooks 与一组工具函数包用来统一你的中后台系统的视觉规范和交互模式。这篇文章带你走完「安装 → 引入 → 渲染」的最短路径读完即可在自己的项目里跑起来。 HiUI 速览82 个组件能覆盖什么这一节回答HiUI 适不适合你的项目、开箱能给你什么。HiUI 由小米开源MIT 协议当前版本 5.0.0设计目标就是中后台系统列表页、表单页、审批流、数据看板这类高频界面。核心能力可以概括为 5 点组件覆盖packages/ui/下 82 个组件横跨数据展示Table、Descriptions、Tree、表单录入Form、Select、DatePicker、反馈与布局Modal、Message、Grid等类别独立发包每个组件都是独立 npm 包如hi-ui/table全量包hi-ui/hiui再统一聚合导出按需与全量两种引入方式都支持规范统一按钮状态、表格列冻结、弹窗行为都遵循同一套设计标准不同人写的页面观感一致配套生态packages/hooks/下 28 个 hooks、packages/utils/下 request、tree-utils 等工具包均可独立安装使用可玩的示例每个组件都带 stories 示例本地起 Storybook 即可实时交互 HiUI 安装教程3 条命令备齐依赖这一节回答怎么装、全量和按需安装有什么区别。安装分两种策略hi-ui/core是基础包两种策略都要装它承载全局样式与国际化等基础能力# 策略一全量安装一个包引入所有组件 npm install hi-ui/core hi-ui/hiui # 策略二按需安装组件名必须全小写、中横线连接 npm install hi-ui/core hi-ui/table如果你想看全部组件的完整用法把示例仓库拉到本地仓库里每个组件目录下都有 README 和可运行示例git clone https://gitcode.com/gh_mirrors/hi/hiui⚡ 渲染第一个组件引入到展示只需 5 行这一节回答装完之后最短路径是什么才能看到东西。import { Button } from hi-ui/hiui export default () ( Button typeprimary第一个 HiUI 按钮/Button )这段代码从全量包引入 Button 并渲染一个主按钮✅ 跑通即说明环境和引入方式都没问题。如果你用的是按需安装把导入换成import Button from hi-ui/button即可产物更小。 拆解 2 个高频组件Table 与 Form这一节回答中后台最常用的「展示列表」和「收集表单」两个场景怎么写。Table能撑住列表页的数据容器Table 的 API 很直白columns描述列data塞数据pagination加分页。import { Table } from hi-ui/hiui const columns [ { title: 姓名, dataKey: name }, { title: 部门, dataKey: dept }, ] const data [{ key: 1, name: 张三, dept: 研发 }] Table columns{columns} data{data} pagination{{ pageSize: 10 }} /这段代码渲染一个两列、带分页的列表。注意每行数据的key必须自己给Table 的 fieldKey 默认取key字段缺省时组件不会帮你生成后续选择、高亮都可能出错。列冻结fixedToColumn、行拖拽draggable、异步数据源等进阶能力见 packages/ui/table/ 的 README。Form把校验内置进表单的录入组件Form 面向登录、新建/编辑这类收集场景校验规则沿用 async-validator 的写法FormItem上的rules会覆盖 Form 全局规则。import { Form, Input } from hi-ui/hiui const FormItem Form.Item Form initialValues{{ username: }} labelWidth{80} FormItem fieldusername label用户名 rules{[{ required: true }]} Input / /FormItem /Form这段代码定义一个必填的「用户名」字段并渲染 Input。表单字段多到重复时可以用 SchemaForm 用 schema 描述整张表单适合批量搭建表单页细节见 packages/ui/form/。⚠️ 上手前核对 4 个易踩的坑这一节回答新手最容易在哪些细节上浪费调试时间。行数据不给 keyTable 的 README 有专门说明每行必须能取到唯一 key否则渲染与选择行为可能异常按需安装命名组件包名必须全小写 中横线比如hi-ui/number-input写成驼峰会直接找不到包列冻结必须配列宽使用 fixedToColumn 时对应列要显式设置 width否则冻结不生效环境版本monorepo 在engines中声明 Node 12.22.1 14.21.3本地跑示例建议对齐 Node 14组件库自身基于 React 17 开发 生态与资源入口去哪查、去哪看这一节回答用法查不到、想读源码或反馈问题时入口在哪里。组件源码与 API每个组件目录自带 README.md完整属性表和stories/可运行示例按组件名到packages/ui/下找即可示例游乐场clone 仓库后执行yarn storybook6006 端口启动本地游乐场全部组件交互可实时体验图标与 hookspackages/icons/有 500 图标组件packages/hooks/的 28 个 hooks 都是独立包按需引入贡献与协议贡献流程见 CONTRIBUTING.md代码协议为 MIT 下一步先把示例跑起来再写页面想确认 HiUI 的实际观感最直接的动作就一条clone 仓库、装依赖、执行yarn storybook82 个组件的示例会在本地 6006 端口等你。找到 Table 和 Form 两页把示例搬进自己的项目第一版中后台页面就能立起来使用中遇到问题直接到仓库提 Issue这是维护者最快的触达方式。【免费下载链接】hiuiHIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend.项目地址: https://gitcode.com/gh_mirrors/hi/hiui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考