您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

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

时间:2022-03-11 09:32:44  来源:  作者:小小咪学前端
企业级中后台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.安装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/



Tags:I组件库   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Web Components实践:如何搭建一个框架无关的AI组件库
一、让人又爱又恨的Web ComponentsWeb Components是一种用于构建可重用的Web元素的技术。它允许开发者创建自定义的HTML元素,这些元素可以在不同的Web应用程序中重复使用,并且...【详细内容】
2024-04-03  Search: I组件库  点击:(8)  评论:(0)  加入收藏
高颜值移动端UI组件库
本文来分享一些热门的、经过验证的高颜值移动端UI组件库,帮助你选择适合自己项目的组件库!VantVant 是有赞团队开源的一个轻量、可定制的移动端组件库,于 2017 年开源。目前 Va...【详细内容】
2023-09-11  Search: I组件库  点击:(286)  评论:(0)  加入收藏
基于 vue3+ts pc端UI组件库JWUI
今天再给大家分享一个超不错的 vue3.js 桌面pc端组件库JW-UI。 jw-ui 一个基于 vue3 typescript 开发的开源UI组件库。包含了21个常用组件。 安装npm install yjw-ui快速...【详细内容】
2023-03-05  Search: I组件库  点击:(186)  评论:(0)  加入收藏
盘点12个Vue 3的高颜值UI组件库
大家好,我是Echa .今天给大家盘点12个Vue 3的高颜值UI组件库,凡是用过Vue 框架开发项目的老铁们最少有用过其中一种或者二种以上的UI组件库,用广东话讲:个个都靓。创作不易,喜...【详细内容】
2022-12-10  Search: I组件库  点击:(943)  评论:(0)  加入收藏
基于 Vue.js 百度轻量级UI组件库VEUI
今天给小伙伴们分享一个超赞的企业级Vue组件库Veui。 veui:百度前端团队基于 vue.js 构建的企业级应用UI组件库。star达到1k+,超70+组件。 https://github.com/ecomfe/veui...【详细内容】
2022-09-26  Search: I组件库  点击:(755)  评论:(0)  加入收藏
企业级中后台React UI组件库 - Ant Design
Ant Design是蚂蚁金服推出的一款用于研发企业级中后台产品设计体系的 React UI 组件库。第一个公开版本是2015年发布的,算是比较早的了。一开始大部分程序员都认为这是阿里K...【详细内容】
2022-03-11  Search: I组件库  点击:(558)  评论:(0)  加入收藏
高质量 Vue.js UI组件库HeyUI
今天给大家分享一款超优秀的Vue免费开源UI组件库HEYUI。 heyui 一套基于 vue2.x 构建的UI组件库,star高达2.2K+。提供 50 多种丰富的组件,支持全局方法及配置、自定义主题、国...【详细内容】
2020-11-12  Search: I组件库  点击:(488)  评论:(0)  加入收藏
如何高效利用Java UI组件库,开发现代化图形用户界面
jQWidgets是一个基于jQuery JavaScript的综合性和创新性的HTML5 UI组件库,旨在帮助开发者创建专业、跨平台的Web应用程序,并最大限度的节省开发时间。jQWidgets包含30多种UI组...【详细内容】
2020-10-15  Search: I组件库  点击:(348)  评论:(0)  加入收藏
UI组件库-Message插件
UI组件库中有一类特别的“组件”,它们的用法和普通的组件有区别,也有自己很明显的特点。用法上,比较简单,不需要和普通组件一样需要引入-注册-写标签,而是可以随时随地,直接通过类...【详细内容】
2020-07-31  Search: I组件库  点击:(426)  评论:(0)  加入收藏
UI组件库-表格高度自适应
各种UI组件库都有表格组件,有的叫 table,有的叫 data grid,反正都是为了展示大量数据。像Element的table组件,功能很强大,代码也很多,我们的目标不是copy一个Element的table,而是要...【详细内容】
2020-07-26  Search: I组件库  点击:(338)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(13)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(16)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown —— 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(20)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(27)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(35)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(26)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(76)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(83)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(42)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(74)  评论:(0)  加入收藏
站内最新
站内热门
站内头条