前端UI框架整理

1.TDesign

腾讯最近刚刚公开的一套UI框架，个人感觉不错，桌面与移动端都有，下面是官网介绍：

TDesign 是什么

TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。
TDesign 具有统一的 设计价值观，一致的设计语言和视觉风格，帮助用户形成连续、统一的体验认知。在此基础上，TDesign 提供了开箱即用的 UI 组件库、设计指南 和相关 设计资产，以优雅高效的方式将设计和研发从重复劳动中解放出来，同时方便大家在 TDesign 的基础上扩展，更好的的贴近业务需求。

为什么会有 TDesign

过去，腾讯内部众多团队搭建了不同的设计体系和组件库产品，以满足各自的业务诉求，提升研发效能。这些体系各自独立维护，彼此割裂。并且，随着内部业务的规模不断扩大，这种割裂的局面愈发严重。
为了应对这一情况，腾讯内部建立了 开源协同委员会，参考开源社区的组织方式，将同类项目的不同技术团队聚合在一起，开源共建。TDesign 在这样的背景下应运而生，在腾讯内部以开源协同的方式，共建一个完善、易用的设计体系和组件库产品。

TDesign 的发展

TDesign 在创建之初就严格按照开源协作的原则运作，包括源代码在内的协作方案讨论、组件设计及 API 制定的过程也完全在公司内源上开放。也得到了公司内开发和设计同学的广泛关注，无论以什么身份参与，TDesign 都同样遵循平等、公开且严格的原则来对待，很多同学从个人项目中试用组件库开始，到提交第一个 Bug Issue，再到提交第一个 Feature MR，最后逐步参与到 MR Review 和方案制定工作中，成为核心贡献者。在过去的一年中，TDesign 关闭了 1k+ Issue，进行了 5k+ 次 CR，保持 每周迭代 发布新版本。
组件库目前支持多个业界主流的开发技术栈，桌面端 Vue2 已发布 Beta 版本，桌面端 Vue3、React 和移动端 Vue3 、微信小程序发布 Alpha 内测版本：

桌面端

仓库 描述 状态

tdesign-vue Vue 2.x 技术栈 Beta
tdesign-vue-next Vue 3.x 技术栈 Alpha
tdesign-react React 16.x 技术栈 Alpha
tdesign-angular 基于 Angular 10 实现 待上线

移动端

仓库 描述 状态

tdesign-mobile-vue Vue 3.x 技术栈 Alpha
tdesign-miniprogram 微信小程序 Alpha
tdesign-mobile-react React 16.x 技术栈 待上线
tdesign-flutter 1.17.0 待上线
同时，TDesign 与腾讯内部在各自的领域具有丰富行业经验业务团队正协作中，提供更多具有业务属性的组件库产品，未来会有包括政务、零售等多个不同风格及组件类型的组件库产品开放出来，敬请期待！

2.NutUI

京东家的主打移动端和小程序，可以配合京东的taro写多端小程序

NutUI 是京东风格的移动端组件库，它支持使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。

特性

70+ 高质量组件（3.0 持续开发中）
基于京东APP 10.0 视觉规范
支持按需引用
详尽的文档和示例
支持 TypeScript
支持服务端渲染（测试阶段）
支持定制主题
单元测试覆盖（3.0 开发中）

3.Taro UI Vue3

还是京东家的，基于 Taro 开发，采用 Vue 3.0 重写的 Taro UI 组件库，主要还是移动端H5与多端小程序

介绍

taro-ui-vue3 是一款基于 Taro 框架开发, 并采用 Vue 3.0 重写的 Taro UI 组件库

Taro

Taro 是由 京东·凹凸实验室 倾力打造的多端开发解决方案。现如今市面上端的形态多种多样，Web、ReactNative、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

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

特性

基于 Taro 开发， 采用 Vue 3.0 重写的 UI 组件
一套组件可以在 微信小程序，支付宝小程序，百度小程序，H5 多端适配运行（ReactNative 端暂不支持）
提供友好的 API，可灵活的使用组件

4.Cube UI

滴滴家的，移动端UI

介绍

cube-ui 是基于 Vue.js 实现的精致移动端组件库。

特性

质量可靠

由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。

体验极致

以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。

标准规范

遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。

扩展性强

支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

5.Ant Design

阿里家的UI框架，同样是各个版本都有，桌面端与移动端都有，覆盖很全面。官网里面都有资源链接就不一个个单独放出来了，下面是官网介绍：

介绍

蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

前端实现

我们采用 React 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。

Ant Design of React（官方实现）
NG-ZORRO - Ant Design of Angular
NG-ZORRO-MOBILE - Ant Design Mobile of Angular
Ant Design of Vue
Ant Design Blazor
San UI Toolkit for Ant Design
antizer (ClojureScript)

6.Element Plus

饿了么出的，也算是阿里家的了，桌面端UI

官网好像没有之前地址的链接，这里就放一下

element-ui

7.Vant

有赞出的，移动端UI框架

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

版本提示

你当前浏览的是 Vant 3.x 版本 的文档，适用于 Vue 3 开发。如果你在使用 Vue 2，请浏览 Vant 2 文档。

特性

🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
🚀 65+ 个高质量组件，覆盖移动端主流场景
💪 使用 TypeScript 编写，提供完整的类型定义
💪 单元测试覆盖率超过 90%，提供稳定性保障
📖 提供完善的中英文文档和组件示例
📖 提供 Sketch 和 Axure 设计资源
🍭 支持 Vue 2、Vue 3 和微信小程序
🍭 支持主题定制，内置 700+ 个主题变量
🍭 支持按需引入和 Tree Shaking
🍭 支持无障碍访问（持续改进中）
🍭 支持服务器端渲染
🌍 支持国际化和语言包定制

浏览器支持

Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。

Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

官方生态

由 Vant 官方团队维护的项目如下：

项目 描述

vant-weapp Vant 微信小程序版
vant-demo Vant 官方示例合集
vant-cli 开箱即用的组件库搭建工具
vant-icons Vant 图标库
vant-touch-emulator 在桌面端使用 Vant 的辅助库
社区生态
由社区维护的项目如下，欢迎补充：

项目 描述

3lang3/react-vant 参照 Vant 打造的 React 移动端组件库
rc-ui-lib 基于 Vant 的 React 版本移动端 UI 组件库
vant-aliapp Vant 支付宝小程序版
taroify Vant Taro 版
vant-theme Vant 在线主题预览工具
@antmjs/vantui 基于 Vant Weapp 开发的多端组件库，同时支持 Taro 和 React

8.uView

uni-app生态下的，移动端UI框架，下面是官网介绍：

来由

uView2.0是继1.0以来的一次重大更新，2.0已全面兼容nvue，为了这个最初的梦想，我们曾日以夜继，挑灯夜战，闻鸡起舞。您能看到屏幕上的字，却看不到我们洒在键盘上的泪。

uView来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，uView永久开源，永远免费。

关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件是uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它们表示感谢。

适用领域

uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。

版权信息

uView遵循MIT (opens new window)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。

注意：这并不意味着您可以将uView应用到非法的领域，比如涉及赌博，暴力等方面。如因此产生纠纷或法律问题，uView相关方及言信科技不承担任何责任。

捐赠uView的研发

做一个UI框架是一项庞大的工作，尤其是要多端适配，并且迅速跟进uniapp官方的更新，uView作者经常为此工作到深夜……

uView文档和源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。

9.mint-ui

移动端UI，目前只看到有vue2.0版本，不知道后续会不会有更新。官网介绍如下：

特性介绍

Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

10. Naïve UI

桌面端UI框架，目前好像只支持vue3，下面是官网介绍：

Naive UI

Naive UI 是一个 Vue3 的组件库。

它比较完整，主题可调，用 TypeScript 写的，不算太慢。

比较完整

有超过 70 个组件，希望能帮你少写点代码。

顺便一提，它们全都可以 treeshaking。

主题可调

我们提供了一个使用 TypeScript 构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象，剩下的都交给我们。

顺便一提，不用 less、sass、css 变量，也不用 webpack 的 loaders。以及你可以试试右下角的主题编辑器。

使用 TypeScript

Naive UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。

顺便一提，你不需要导入任何 CSS 就能让组件正常工作。

不算太慢

我尽力让它不要太慢。至少 select、tree、transfer、table、cascader 都可以用虚拟列表。

顺便一提，…，没有顺便了。祝你使用愉快。

社区

Discord
钉钉一群 33482509 (已满)
钉钉二群 35886835

贡献

请参考 CONTRIBUTING.md。

许可

Naive UI 使用 MIT license 许可证书。

11.View UI

桌面端UI框架，之前是iView现在更名为 View UI，下面是官网介绍：

关于 View UI®

View UI®，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

该项目即为原先的 iView，从 2019 年 10 月起正式更名为 View UI®，并使用全新的 Logo 。iView 作者将在新仓库（https://github.com/view-design/ViewUI）继续开发 iView 4.0 和后续版本，以及维护工作。原仓库 iView 作者不再继续提交内容。

重要提示

从 4.0.0 开始，原先的 npm 包 iview 将不再使用，需要替换为新包 view-design，详细的升级指南请查看：升级 4.x 指南
iView Admin Pro 开箱即用的企业级后台管理系统模板，新增用户管理、菜单权限管理，角色权限管理 立即查看

特性

丰富的组件和功能，满足绝大部分网站场景
提供开箱即用的 Admin 系统 和 高阶组件库，极大程度节省开发成本
提供专业、优质的一对一技术支持
友好的 API ，自由灵活地使用空间
细致、漂亮的 UI
事无巨细的文档
可自定义主题

12.VUX

移动端vue2.x 的UI框架，个人感觉不是很好用，以后不知道会不会更新支持vue3

简介

VUX（读音 [v’ju:z]，同 views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

基于webpack + vue-loader + vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。

vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

VUX并不完全依赖于WeUI，VUX 在 WeUI 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUI的设计规范。

VUX 并不是一个能解决所有场景的完美解决方案(实际上也没有一个方案能解决所有问题)，也会出现某些bug或者某些特性不支持，所以如果遇到问题麻烦及时不带情绪正确反馈，我们乐于及时解决描述详细方便重现的问题。

即使你不直接使用 VUX 组件代码, 你依然可以参考 VUX 代码来实现自己的组件库。如果一定程度上帮助到了你，那么维护这个项目也就有所意义。

13.at-ui

凹凸实验室的，不知道是不是京东的。桌面端vue2.x的UI框架，官网简介如下：

介绍

AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品

特性

基于 Vue 开发的 UI 组件
使用 npm + webpack + babel 的工作流，支持 ES2015
CSS 样式独立，即使使用不同的框架实现，也都能保持统一的 UI 风格（ 详见：AT-UI Style ）
提供友好的 API，可灵活的使用组件

浏览器支持

现代浏览器和 IE9 及以上
Electron
NW.js

版本

AT-UI：npm version

AT-UI-Style：npm version

贡献

如果你在使用 AT-UI 时遇到问题，或者有好的建议，欢迎给我们提 Issue 或 Pull Request

14.muse-ui

桌面端vue2.x 的UI框架，不知道后续会不会更新VUE3版本

组件丰富

Muse UI 拥有40多个UI 组件，用于适应不同业务环境。

可定制

Muse UI 自定义主题方式极为优雅，仅需少量代码即可完成主题样式替换。

基于 Vue 2.0

Muse UI 基于 Vue2.0 开发，Vue2.0是当下最快的前端框架之一，小巧，api友好，可用于开发的复杂单页应用

国内的暂时就整理到这了，下面是一些国外的UI框架

15.bootstrap

基于原生的bootstrap版本开发的，简单放一下相关链接：

bootstrap

bootstrap-vue

react-bootstrap

ng-bootstrap

16.vuetify

目前3.x还没有中文文档，下面是2.x版本官网介绍：

介绍

了解 Vuetify 是什么，如何从头开始创建应用程序，浏览 API 参考，示例代码，教程等更多信息。

快速入门

尝试Vuetify的最简单方法是使用我们的 Codepen 模板。 文档中的所有示例都使用此模板，并且是一个用来玩转这个框架的完美沙盒。 如果您喜欢使用本地 index.html 文件，我们就可以通过 CDN 来使用

关于附加的安装选项，如 Nuxt 和 VuePress, 请访问 安装 页面

什么是 Vuetify？

Vuetify 是建立在Vue.js之上的完备的界面框架。 该项目的目标是向开发人员提供他们积累的丰富且吸引用户体验所需的工具。 与其他框架不同。 Vuetify从一开始就设计为易于学习的并且拥有来自 Material设计规范 的数百个精心设计组件。

Vuetify采用移动优先的设计，这意味着无论是在手机、平板电脑还是台式电脑上，你的应用程序都可以开箱即用。

为什么选择 Vuetify？

自2014年发布以来，Vue.js 已经成为世界上最流行的 JavaScript 框架之一。 这种流行的原因之一是_组件_的广泛使用，它使开发人员能够在应用程序中创建可复用的简洁模块。 UI库是这些模块的集合，这些模块实现了特定的样式准则，并提供了构建扩展web应用程序所需的工具。

Vuetify完全按照Material设计规范进行开发，每一个组件都经过精心设计，具有模块化、响应式和优秀的性能。 使用独特和动态的 布局 自定义您的应用程序，并使用 SASS 变量 自定义您的组件的样式。

Vuetify有一个非常活跃的开发周期，并且每周都有补丁，以极快的速度响应社区问题和报告，使您能够更经常地进行错误修复和增强. 此外，每个主要版本都附带18个月的<a href=“/introduction/long-term support/”>长期支持。

不同于其它框架，当你使用Vuetify开发时，你从来不是孤立的。 有什么问题吗? 充分利用我们庞大的 Discord社区 并通过我们的公共帮助渠道与其他Vuetify开发者协作。 需要更个性化的支持解决方案？ Vuetify 通过 GitHub 赞助 为个人和企业提供量身定制的 精英支持 。 查看其他 赞助 Vuetify 开发 的方式。

17.Material-UI

一款优秀的react UI框架，组件种类也很多主要是桌面端。

官网并没有介绍，不过有教学视频和案例，还有一些收费的服务。有条件的可以去官网查看。