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


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

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

文章插图
 
企业级产品是一个庞大且复杂的系统,数量多且功能复杂,而且变动和并发频繁,常常需要设计者与开发者能快速做出响应 。同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容 。
当然因为企业级产品组件比较多,小公司每一个组件都去开发费时费力,直接拿大厂的UI组件库直接搭起来开发效率就快多了,大厂的UI设计和审美还是没话说的,开发的时候直接关注业务逻辑就可以了 。
目前组件有如下:
企业级中后台React UI组件库 - Ant Design

文章插图
 

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

文章插图
 

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

文章插图
 

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

文章插图
 

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

文章插图
 

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

文章插图
 

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

文章插图
 

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

文章插图
 

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

文章插图
 
其它特点:
  • 支持更换主题色
  • 支持动态更换主题色(没试过)
  • 支持国际化
  • 支持TS开发
  • 可以套娃在Electron里面
  • 官方提供了Sketch,Axure,墨刀等设计产品原型软件的设计资源
其它说明:重型组件适合表格,表单等定制化强的需求下使用,这些组件是属于ProComponents,需要单独安装使用 。
里面的日期时间组件输出格式都是使用moment格式,非常适合自己个性化渲染,具体教程可以搜索moment.js(也可以用dayjs代替,体积更小,两者操作方法一模一样) 。
使用教程:1.安装nodejsnodejs下载: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
相关链接:项目官网:https://ant.design
Github项目地址:https://github.com/ant-design/ant-design/

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


    推荐阅读