HIUI 中后台组件库完整使用指南
项目地址: https://gitcode.com/gh_mirrors/hi/hiui HIUI 是一个面向中后台系统的前端组件库，由小米公司开源，致力于帮助开发人员快速实现交互一致、界面美观的界面开发。该组件库专注于中后台产品的交互与视觉设计，提供全面的流程和数据展示模板。
项目特性与优势
HIUI 具有以下核心特性：
- 精于中后台产品的交互与视觉设计
- 全面的流程、数据展示模板，从业务中来，模板、组件覆盖大多数中后台系统需求
- 数据结构分离的单组件设计，无需学习，升级方便，开箱即用
安装与配置
环境要求
确保已安装 Node.js 环境，建议使用 Node.js 12.22.1 至 14.21.3 版本。
安装方式
全量安装
npm config set registry https://registry.npmjs.org
npm install @hi-ui/core @hi-ui/hiui
按需安装（以 Button 组件为例）
npm config set registry https://registry.npmjs.org
npm install @hi-ui/core @hi-ui/button
注意：组件名请全部小写，并使用中横线连接。
核心组件详解
Button 按钮组件
Button 是 HIUI 中最基础也是最常用的组件之一，提供多种样式和状态：
- 主要按钮（type="primary"）
- 次要按钮（type="secondary"）
- 线框按钮（type="line"）
- 链接按钮（type="link"）
- 禁用状态（disabled）
- 加载状态（loading）
Table 表格组件
Table 组件用于展示结构化数据，支持以下功能：
- 分页显示
- 排序功能
- 自定义列渲染
- 行选择操作
Form 表单组件
Form 组件提供完整的表单解决方案：
- 表单验证
- 表单布局
- 动态表单
- 数据绑定
项目结构与开发
HIUI 采用 monorepo 架构，使用 Lerna 和 Turbo 进行项目管理：
packages/
├── ui/ # UI 组件
├── hooks/ # React Hooks
├── utils/ 工具函数
├── core/ 核心包
└── icons/ 图标组件
开发脚本说明
项目提供以下主要开发脚本：
yarn storybook- 启动 Storybook 开发环境yarn build- 构建所有包yarn test- 运行测试yarn bootstrap- 初始化项目依赖
使用示例
以下是一个基础的使用示例：
import React from 'react'
import { Button, Table } from '@hi-ui/core'
import '@hi-ui/hiui/dist/index.css'
function AdminDashboard() {
const handleClick = () => {
console.log('按钮被点击')
}
const tableData = [
{ id: 1, name: '用户一', status: '正常' },
{ id: 2, name: '用户二', status: '禁用' }
]
return (
<div>
<Button type="primary" onClick={handleClick}>
主要操作
</Button>
<Table
data={tableData}
columns={[
{ title: 'ID', dataIndex: 'id' },
{ title: '姓名', dataIndex: 'name' },
{ title: '状态', dataIndex: 'status' }
]}
/>
</div>
)
}
组件开发规范
HIUI 遵循严格的组件开发规范：
- 每个组件独立打包发布
- 提供完整的 TypeScript 类型定义
- 包含单元测试和 Storybook 示例
- 支持按需引入和样式定制
最佳实践建议
在使用 HIUI 进行中后台开发时，建议遵循以下最佳实践：
- 按需引入组件，避免不必要的包体积
- 合理使用组件提供的配置选项
- 遵循 HIUI 的设计规范保持界面一致性
- 充分利用组件库提供的模板和示例
项目贡献
欢迎开发者参与 HIUI 的贡献，项目使用标准的 Git 工作流，包含完整的代码审查和自动化测试流程。
通过使用 HIUI 组件库，开发者可以显著提升中后台系统的开发效率，同时保证产品的交互体验和视觉一致性。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
