README-zh.md

HIUI

English | 中文

---

HIUI 是一个面向中后台系统的前端组件库，可以帮助开发人员快速实现交互一致、界面美观的界面开发。

特性

• 精于中后台产品的交互与视觉设计
• 全面的流程、数据展示模板，从业务中来，模板、组件覆盖大多数中后台系统需求
• 数据结构分离的单组件设计，无需学习，升级方便，开箱即用

安装

npm install @hi-ui/hiui

组件使用详见官方文档。

贡献

项目结构

.
├── build                   # 构建命令
├── components              # 组件
├── docs                    # 使用文档
│   ├── en-US
│   └── zh-CN
├── libs                    # 第三方依赖
├── locales                 # 语言配置
├── site                    # 文档页模板
├── CHANGELOG.md
├── commitlint.config.js    # Commit 检查
├── gulpfile.js             # 构建配置项
├── LICENSE
├── README-zh.md
├── README.md
├── package.json
└── postcss.config.js

配置环境

# 安装依赖
$ npm i

# 开启本地开发环境 localhost:4200
$ npm start

打开 http://localhost:4200

单元测试

# require node version >= 10

$ npm run jest:coverage

添加展示/文档模块

1. 在 components/index.js 下添加 export { default as XXX } from './XXX'
2. 在 docs/${lang}/ 下分别添加中英文文档
3. 在 locales/${lang} 下添加组件对应的名字用于左侧导航显示
4. 在 pages/ 添加对应的组件，在 pages/index 下面引入对应的组件

注：pages/index下组件的关键字必须与 locales 下组件的关键字一致，关键字命名与components 下面文件夹命名相同即可

开发流程

• 文件夹命名：所有文件夹均为小写命名，多个单词则中间加 -，例如 date-picker、page
• 文件命名：文件命名组件名每个首字母大写，例如 DatePicker、Page，非组件的功能性文件均使用小写，多个单词用 - 连接
• class 命名：组件所有的样式放在 components/**/style 下，class 命名使用 BEM 命名---Block__Element--Modifier
• 对外 API 命名：组件对外暴露 API使用驼峰命名

规范

• BEM
• git-flow (AVH Edition)
• JavaScript Standard Style

License

MIT

-- EOF --