前端UI框架整理

1.TDesign

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

TDesign 是什么

为什么会有 TDesign

TDesign 的发展

桌面端

仓库 描述 状态

移动端

仓库 描述 状态

2.NutUI

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

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

特性

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等）运行的代码。

特性

4.Cube UI

滴滴家的，移动端UI

介绍

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

特性

质量可靠

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

体验极致

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

标准规范

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

扩展性强

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

5.Ant Design

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

介绍

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

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

前端实现

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

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 文档。

特性

浏览器支持

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

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

官方生态

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

项目 描述

项目 描述

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、以及各种小程序(微信/支付宝/百度/头条//钉钉)等多个平台(引言自uni-app网)。

版权信息

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

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

捐赠uView的研发

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

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

9.mint-ui

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

特性介绍

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 都可以用虚拟列表。

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

社区

贡献

请参考 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 作者不再继续提交内容。

重要提示

特性

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 网站中后台产品

特性

浏览器支持

版本

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框架，组件种类也很多主要是桌面端。

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