前端人必知的七大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这样开箱即用且美观的中后台前端解决方案

它同时提供了ReactVue两个版本的使用文档

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 外的通用组件库,比如 VueSvelte

同时,Semi Design还提供了Design to code(简称D2C设计稿转代码功能,支持一键识别 Figma 页面中图层布局 + Semi 组件,像素级还原设计稿,转译为JSXCSS 代码,快捷预览, 无需从 0 开发,很强大有木有!

4. Ant Design

Ant Design

Ant Design是蚂蚁集团的企业级产品,其使用者不乏像蚂蚁、阿里巴巴、腾讯、百度、口碑、美团、滴滴等大厂

相信有很多小伙伴对Ant Design已经很熟悉不过了,不管是Ant Design of React还是Ant Design of Vue,都提供了很精美且实用的功能和组件

Ant Design的特点:

  • 提炼自企业级中后台产品的交互语言和视觉风格

  • 开箱即用的高质量 ReactVue 组件

  • 全面支持使用 TypeScript 开发,提供完整的类型定义文件

  • 全链路开发和设计工具体系

  • 数十个国际化语言支持

  • 拥有主题定制的能力

而且,除了Ant Design,蚂蚁还提供了Ant Design Mobile RN of React,用于服务移动端

5. Element

element

不出意外的话,这个组件库是大家使用最为频繁的一款

Element是由饿了么团队出品的桌面端组件库。发展到现在,其已经实现了对ReactAngular的支持,同时还提供SketchAxure模板资源文件方便快速产品设计

Element UI除了自己的组件库外,还提供了支持V2element admin和支持V3element-plus,同时还有相对应的开发文档和演示地址

6. View Design

View Design

View Design,也就是我们常说的iView,它提供了诸多比较全面且功能丰富的产品,如:

  • View UI Plus :基于 Vue.js 3 的一套 UI 组件库,主要用于企业级中后台系统

  • Admin Cloud :一套企业级的多租户权限管理开发平台,基于 Admin PlusiCRUD若依

  • 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等等我们就不在介绍了。欢迎大家在评论区交流你所使用的组件库是什么

网站资源链接

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容