Ant Design是蚂蚁金服推出的一款用于研发企业级中后台产品设计体系的 React UI 组件库。第一个公开版本是2015年发布的，算是比较早的了。一开始大部分程序员都认为这是阿里KPI的产物，不过这么多年来一直持续迭代，我可以说这是最强UI组件，Github的star达到了78.5K，目前官方维护的是React版本，VUE版本是社区维护。

企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。

当然因为企业级产品组件比较多，小公司每一个组件都去开发费时费力，直接拿大厂的UI组件库直接搭起来开发效率就快多了，大厂的UI设计和审美还是没话说的，开发的时候直接关注业务逻辑就可以了。

目前组件有如下：

其它特点：

支持更换主题色
支持动态更换主题色(没试过)
支持国际化
支持TS开发
可以套娃在Electron里面
官方提供了Sketch，Axure，墨刀等设计产品原型软件的设计资源

其它说明：

重型组件适合表格，表单等定制化强的需求下使用，这些组件是属于ProComponents，需要单独安装使用。

里面的日期时间组件输出格式都是使用moment格式，非常适合自己个性化渲染，具体教程可以搜索moment.js(也可以用dayjs代替，体积更小，两者操作方法一模一样)。

使用教程：

1.安装nodejs

nodejs下载：http://nodejs.cn/

2.安装Yarn

因为npm在国内安装很慢，所以需要安装yarn或者cnpm

npm install -g yarn

3.安装脚手架

yarn create @umijs/umi-app

根据提示选择然后回车执行安装就行了

4.编译启动

先执行yarn进行编译，然后执行yarn start运行，最后访问控制台输出的地址

现有的项目使用antd

yarn add antd

网站首页 > 精选文章 / 正文

企业级中后台React UI组件库 - Ant Design