前端人必知的七大UI组件库!
今天给大家分享一下前端人必知的七个常用的UI组件库,这些组件库相信有不少的小伙伴正在使用。每个组件库的来源背景和风格功能都不尽相同,值得大家尝试一波。
今天分享的七个UI组件库分别为:
-
Arco Design
-
Taro UI
-
Semi Design
-
Ant Design
-
Element
-
View Design
-
Vant
网站资源链接在本文最后面哦~
1. Arco Design
Arco Design
Arco Design
是 字节跳动
出品的企业级设计系统,也是个人十分喜欢的一款组件库
当然,他不仅仅是组件库
它还有Arco Design Pro
这样开箱即用且美观的中后台前端解决方案
它同时提供了React
和 Vue
两个版本的使用文档
2. Taro UI
Taro UI
Taro UI
是由 京东·凹凸实验室
倾力打造的多端开发解决方案。
使用Taro
,我们可以只书写一套代码,再通过Taro
的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码
Taro
的特性:
-
基于
Taro
开发 UI 组件 -
一套组件可以在
微信小程序
,支付宝小程序
,百度小程序
,H5
多端适配运行(ReactNative
端暂不支持) -
提供友好的 API,可灵活的使用组件
3. Semi Design
Simi Design
Semi Design
是由抖音前端团队
,MED 产品设计团队
设计、开发并维护的设计系统。
Semi Design
不仅仅是一套精美的设计系统,还是一款开箱即用的React
组件库,相信很多使用React
开发的小伙伴对它已经并不陌生了
Semi Design
还提供了主题编辑器(DSM)和主题商店,你还可以通过npm
下载主题包,让你对主题的定制变的更加灵活方便!
最关键的是,Semi Design
还采用了跨前端框架技术方案实现、F/A 分层设计,通过重构,可以快速支持除 React 外的通用组件库,比如 Vue
、Svelte
等
同时,Semi Design
还提供了Design to code
(简称D2C
)设计稿转代码功能,支持一键识别 Figma 页面中图层布局 + Semi 组件,像素级还原设计稿,转译为JSX
和 CSS
代码,快捷预览, 无需从 0 开发,很强大有木有!
4. Ant Design
Ant Design
Ant Design
是蚂蚁集团的企业级产品,其使用者不乏像蚂蚁、阿里巴巴、腾讯、百度、口碑、美团、滴滴等大厂
相信有很多小伙伴对Ant Design
已经很熟悉不过了,不管是Ant Design of React
还是Ant Design of Vue
,都提供了很精美且实用的功能和组件
Ant Design
的特点:
-
提炼自企业级中后台产品的交互语言和视觉风格
-
开箱即用的高质量
React
和Vue
组件 -
全面支持使用
TypeScript
开发,提供完整的类型定义文件 -
全链路开发和设计工具体系
-
数十个国际化语言支持
-
拥有主题定制的能力
而且,除了Ant Design
,蚂蚁还提供了Ant Design Mobile RN of React
,用于服务移动端
5. Element
element
不出意外的话,这个组件库是大家使用最为频繁的一款
Element
是由饿了么团队出品的桌面端组件库。发展到现在,其已经实现了对React
和Angular
的支持,同时还提供Sketch
、Axure
模板资源文件方便快速产品设计
Element UI
除了自己的组件库外,还提供了支持V2
的element admin
和支持V3
的element-plus
,同时还有相对应的开发文档和演示地址
6. View Design
View Design
View Design
,也就是我们常说的iView
,它提供了诸多比较全面且功能丰富的产品,如:
-
View UI Plus
:基于 Vue.js 3 的一套 UI 组件库,主要用于企业级中后台系统 -
Admin Cloud
:一套企业级的多租户权限管理开发平台,基于Admin Plus
、iCRUD
和若依
-
Admin Plus
:一套企业级的通用型中后台前端解决方案,它基于View UI Plus
,适用于V3
-
iCRUD
: 一套基于View UI Plus
的增强型表格组件,面向配置开发,快速搭建具备 增、删、改、查 功能的表格页面。支持V3
7. Vant
Vant
Vant
,由有赞前端团队
开发,是一款轻量、可靠的移动端组件库,于 2017 年开源,是目前在移动端开发中比较主流的一款组件库
Vant
的特点:
-
提供 60 多个高质量组件,覆盖移动端各类场景
-
性能极佳,组件平均体积不到 1kb(min+gzip)
-
单元测试覆盖率 90%+,提供稳定性保障
-
完善的中英文文档和示例
-
支持
Vue2
&Vue3
-
支持按需引入
-
支持主题定制
-
支持国际化
-
支持
TypeScript
-
支持
SSR
当然,很多小伙伴也使用到了本文没有提到过其他的组件库或者框架,比如被有些小伙伴称之为"YYDS"的Bootstrap
,又或者很多同学在JQuery
时代使用很熟练的layui
,当然,发展到至今,layui
也出了Vue
版本。
还有一些其他的组件库如Zent
组件库、Material
风格的Vuetify
等等我们就不在介绍了。欢迎大家在评论区交流你所使用的组件库是什么