<返回更多

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

2022-03-11    小小咪学前端
加入收藏
企业级中后台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

 

其它特点:

其它说明:

重型组件适合表格,表单等定制化强的需求下使用,这些组件是属于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

相关链接:

项目官网:https://ant.design

Github项目地址:https://github.com/ant-design/ant-design/

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>