前端开发必备！30+优质组件库全推荐

（一）移动端 常用组件库

1. Taro UI for React - 京东出品，多端合一，所向披靡

官网：Taro UI | O2Team

2. uView UI，是uni-app生态最优秀的UI框架

uView - 多平台快速开发的UI框架 - uni-app UI框架

3. uview-plus（Vue3）uview-plus，是全面兼容nvue的uni-app生态框架

uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架

4. Cube UI 滴滴出行移动端 UI

cube-ui Document

5、 NuTUI 京东移动端 UI 库，面向电商业务场景，支持 Vue2/3

NutUI - 移动端组件库

6、Mint ui 饿了么前端团队开发的移动组件库

Mint UI

7、OnsenUI Onsen UI 是一个开源的移动端 UI 组件库

https://s.onsen.io/

8、VUX 移动端 UI 组件库，针对微信强势优化

https://vux.li/

9、ChatUI

ChatUI

10、Wot Design Uni

Wot UI | 一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。

11、京东UI组件库

NutUI-JDT 京东科技风格的轻量级移动端 Vue 组件库

（二）PC端（web端）常用组件库

1、Element UI （ Vue2）Element UI 是一个基于 Vue.js 2.0 的开源 UI 组件库

Element - The world's most popular Vue UI framework

2、Element UI PLUS （Vue3）

Element UI PLUS（简称 EPLUS）是在 Element UI 基础上，由社区开发者自发推出的 Element UI 增强版组件库。它在 Element UI 的基础上，提供了更多的功能和组件，并且对一些组件的样式和行为进行了改进和优化。

 https://element-plus.org/zh-CN/#/zh-CN

3、Ant Design Vue (2/3)

Ant Design Vue

4、Naive UI

Naive UI

5、Avue（Vue动态组件库）

Avue

6、Vuetify 3 Vuetify 3 是一个基于 Vue.js 的响应式 Material Design 组件库

Vuetify —— 一个 Vue 的组件框架 — Vuetify

7、iView 一套基于 Vue.js 的高质量UI 组件库

iView / View Design 一套企业级 UI 组件库和前端解决方案

8、Vue Material

Vue Material

9、Vue Element Admin 是一个开箱即用的后台管理系统模板

vue-element-admin

10、Vue Bootstrap

BootstrapVue

11、Vue-Blu

Vue-Blu

12、Keen UI Keen UI 是一个基于 Vue.js 的轻量级 UI 组件库

Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design.

13、Buefy Buefy 是一个基于 Vue.js 和 Bulma CSS 框架构建的 UI 组件库

https://buefy.org/

14、Fish-UI Fish-UI是一个基于Vue.js的组件库

fish-ui A Vue.js 2.0 UI Toolkit for Web.

15、Quasar

Quasar Framework 中文网

16、hey UI

HeyUI: A high quality UI Toolkit based on Vue.js

17、arco.design

Arco Design - 企业级产品的完整设计和开发解决方案

（三）数据可视化组件库（数据大屏）

1、echarts（图表组件库）

 Examples - Apache ECharts ECharts（Enterprise Charts）是一个由百度开源的数据可视化库，用于创建交互式的图表和数据可视化界面。它是一个基于JavaScript的库，可在Web应用程序中使用。

echarts社区

series-bar柱状图 - makeapie echarts社区图表可视化案例

2、Datav （数据大屏组件库）

Datav是一个专业的数据可视化工具，它为用户提供了各种可视化组件、模板、图表等元素，帮助用户快速构建数据可视化页面，支持多种数据源的导入和自定义数据处理，具有快速、易用、可扩展等优点。

DataV

3、vue-seamless-scroll （Vue无缝滚动组件）

 vue-seamless-scroll

https://doc.wssio.com/opensource/vue3-seamless-scroll/

4、AntV 蚂蚁集团全新一代数据可视化解决方案

https://antv.vision/

5、Chart.js

Chart.js 中文网

6、v-charts （Vue图表组件库）

v-charts

7、Viserjs

Viser

8、 Vue baidu map （百度地图组件）

 Vue Baidu Map

9、vue3-baidu-map-gl

Map 地图 | Vue3 BaiduMap GL

10、ppchart （echarts社区）

PPChart - 让图表更简单

11、isqqw（echarts社区）

echarts图表集

12、makeapie（echarts社区）

makeapie echarts社区图表可视化案例

（四）动画组件库

1）swiper（轮播图组件库）

Swiper 是一个流行的移动端轮播图组件库，用于创建滑动轮播和触摸滑动效果的移动端应用程序。它是一个基于 JavaScript 的库，具有平滑的滑动效果、丰富的配置选项和灵活的扩展性。

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

https://swiperjs.com/demos

2）kinesis（动画组件库）

包括过渡动画、滚动效果、缩放、淡入淡出等

 Kinesis

3）vue-seamless-scroll （Vue无缝滚动组件）

Vue2： vue-seamless-scroll Vue3： https://doc.wssio.com/opensource/vue3-seamless-scroll/

4）Loading（加载动画组件）

 https://loading.io/spinner/

Loading加载动画组件是一种用于展示页面或组件正在加载的动画效果的组件。在 Vue.js 中，有许多开源的 Loading加载动画组件库可以使用，这些组件库提供了各种各样的加载动画效果，可以帮助开发人员为页面或组件添加一些生动的动画效果，增强用户体验。

5）Animate.css

 Animate.css | A cross-browser library of CSS animations. Animate.css 是一个流行的前端动画库，它提供了一系列预定义的 CSS 动画效果，使开发人员能够轻松地在网页或应用程序中添加动画效果。

6）Velocityjs

 Velocity.js 结合了 Velocity.js 和 Vue 的动画库，可以通过声明式的方式在 Vue 组件中实现高性能的动画效果。

7）Vue-Motion

 https://posva.net/vue-motion/#/ 一个简洁的 Vue 动画库，基于动画库 Framer Motion，提供了流畅的物理动画效果和强大的动画控制能力。

（五）文本编辑器组件库

1）TinyMCE （富文本编辑器）

官网及文档： The Most Trusted & Feature-rich WYSIWYG Rich Text Editor | TinyMCE 🔸中文文档： http://tinymce.ax-z.cn/

官网下载： Self Hosted WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE

Github： https://github.com/tinymce

vue-tinymce  https://packy-tang.gitee.io/vue-tinymce/#/【Vue整合地址】

2）vue-quill-editor（富文本编辑器）

https://github.surmon.me/vue-quill-editor

https://github.com/surmon-china/vue-quill-editor

3）MarkdownEditor （Markdown文本编辑器）

 https://b3log.org/vditor/（官网地址）

 https://b3log.org/vditor/demo/vue.html（Vue当中使用）

（六）3D组件库

1）ThreeJS （3D组件库）：

 Three.js – JavaScript 3D Library Three.js 是一个流行的开源 JavaScript 库，用于在 Web 浏览器中创建和展示 3D 图形场景。它基于 WebGL 技术，提供了一组强大的工具和功能，使开发者能够轻松地构建复杂的交互式 3D 应用程序和动画效果。

2）A-Frame web 虚拟现实框架

 https://aframe.io/ A-Frame 是一个基于 Web 技术的开源框架，用于构建虚拟现实（VR）和增强现实（AR）应用程序。它是由 Mozilla 团队开发的，建立在 HTML、CSS 和 JavaScript 的基础上，通过简单的标记语言和组件系统，使开发者能够轻松创建和展示交互式的 VR 和 AR 内容。

3）BabylonJs 3D游戏框架

Babylon.js 是一个强大的开源 JavaScript 框架，用于构建高性能的 3D 游戏、虚拟现实（VR）和增强现实（AR）应用程序。它提供了丰富的功能和工具，使开发者能够创建复杂的交互式 3D 场景和游戏体验。虚拟数字人，WEB3D，3D建筑，3D设计，元宇宙空间，网页游戏，小程序游戏

Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best

通过使用 Babylon.js，开发者可以创建各种类型的 3D 应用程序和游戏，包括虚拟现实、增强现实、角色扮演游戏、射击游戏、模拟器等。它提供了强大的工具和功能，使得构建复杂的 3D 体验变得更加简单和高效

4）vue-3d-loader （基于threeJS的vue 3D展示组件）

 首页 | Vue 3d loader

5）Galacean 移动优先的高性能 Web 互动引擎（蚂蚁集团）

 Galacean - Mobile first high performance web interactive engine

6）Orillusion次时代 WebGPU 引擎

 Orillusion | 专业 WebGPU 引擎

7）Lingo3D （3D组件库）

 https://www.lingo3d.com/

 https://github.com/lingo3d/lingo3d

（七）其他组件库

1）v3-color-picker（颜色选择器组件库）

https://doc.wssio.com/opensource/v3-color-picker/

2）CSS Grid Generator

CSS Grid Generator