前端常用的UI组件库

hykeda4周前Vue86
  • Arco Design

  • Taro UI

  • Semi Design

  • Ant Design

  • Element

  • View Design

  • Vant

  • Layui-vue

  • Fusion Design


1. Arco Design


Arco Design 是 字节跳动 出品的企业级设计系统,也是个人十分喜欢的一款组件库

当然,他不仅仅是组件库

它还有Arco Design Pro这样开箱即用且美观的中后台前端解决方案

它同时提供了React 和 Vue两个版本的使用文档


2. Taro UI


Taro UI 是由 京东·凹凸实验室 倾力打造的多端开发解决方案。

使用Taro,我们可以只书写一套代码,再通过Taro的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码


Taro的特性:

  • 基于 Taro 开发 UI 组件

  • 一套组件可以在 微信小程序支付宝小程序百度小程序H5 多端适配运行(ReactNative 端暂不支持)

  • 提供友好的 API,可灵活的使用组件


3. Semi 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 组件,像素级还原设计稿,转译为JSX 和 CSS 代码,快捷预览, 无需从 0 开发,很强大有木有!


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


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


6. 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,由有赞前端团队开发,是一款轻量、可靠的移动端组件库,于 2017 年开源,是目前在移动端开发中比较主流的一款组件库


Vant的特点:

  • 提供 60 多个高质量组件,覆盖移动端各类场景

  • 性能极佳,组件平均体积不到 1kb(min+gzip)

  • 单元测试覆盖率 90%+,提供稳定性保障

  • 完善的中英文文档和示例

  • 支持 Vue2 & Vue3

  • 支持按需引入

  • 支持主题定制

  • 支持国际化

  • 支持 TypeScript

  • 支持SSR



当然,很多小伙伴也使用到了本文没有提到过其他的组件库或者框架,比如被有些小伙伴称之为"YYDS"的Bootstrap,又或者很多同学在JQuery时代使用很熟练的layui,当然,发展到至今,layui也出了Vue版本。

还有一些其他的组件库如Zent组件库、Material风格的Vuetify等等我们就不在介绍了。


网站资源链接



Layui-vue:网站首页

Fusion Design :网站首页

相关文章

vite+vue 插件/组件集合

自动引入插件:https://github.com/antfu/unplugin-auto-importvue的按需组件自动导入:https://github.com/antfu/unplugin-v...

vue 中父组件要向子组件通过props传值出现延时处理方案

在开发vue是,父组件要向子组件传值,但是这个值是父组件通过接口请求的,如果直接通过<ABC :abc="data"/>这样在子组件中获取到的abc是为空,因...

vue3项目,Element-plus ElMessage API 调用样式丢失问题

1、Element-plus使用了自动按需导入,vite.config.js配置如下:defineConfig({     plugins: [...

在html5中使用Vue3,并且使用组件形式

有的时候为了使用vue编写一些前端程序,如果直接搭建框架感觉太过庞大了。如何直接在html中使用呢?接下来详细介绍:1)引入Vue,并创建Vue实例在官网上,已经讲得很清楚了,我们可以这样使用&nbs...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。