企业官网建设流程全解析

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/hiui

HiUI 是一套基于 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 type="primary">第一个 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 field="username" label="用户名" rules={[{ required: true }]}> <Input /> </FormItem> </Form>

这段代码定义一个必填的「用户名」字段并渲染 Input。表单字段多到重复时，可以用 SchemaForm 用 schema 描述整张表单，适合批量搭建表单页，细节见 packages/ui/form/。

⚠️ 上手前核对 4 个易踩的坑

这一节回答：新手最容易在哪些细节上浪费调试时间。

1. 行数据不给 key：Table 的 README 有专门说明，每行必须能取到唯一 key，否则渲染与选择行为可能异常
2. 按需安装命名：组件包名必须全小写 + 中横线，比如@hi-ui/number-input，写成驼峰会直接找不到包
3. 列冻结必须配列宽：使用 fixedToColumn 时，对应列要显式设置 width，否则冻结不生效
4. 环境版本：monorepo 在engines中声明 Node >=12.22.1 <=14.21.3，本地跑示例建议对齐 Node 14；组件库自身基于 React 17 开发

🔭 生态与资源入口：去哪查、去哪看

这一节回答：用法查不到、想读源码或反馈问题时，入口在哪里。

• 📌组件源码与 API：每个组件目录自带 README.md（完整属性表）和stories/可运行示例，按组件名到packages/ui/下找即可
• 示例游乐场：clone 仓库后执行yarn storybook，6006 端口启动本地游乐场，全部组件交互可实时体验
• 图标与 hooks：packages/icons/有 500+ 图标组件，packages/hooks/的 28 个 hooks 都是独立包，按需引入
• 贡献与协议：贡献流程见 CONTRIBUTING.md，代码协议为 MIT

🏁 下一步：先把示例跑起来，再写页面

想确认 HiUI 的实际观感，最直接的动作就一条：clone 仓库、装依赖、执行yarn storybook，82 个组件的示例会在本地 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