0


12 款在手,前端无忧——Vue UI 组件库

Code Is Never Die !
今日分享下同事推荐的十二款VUE UI组件库,方便前端开发的伙伴们参考

Element UI

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它是一个用于 Web 的 UI 组件库 ,除了 Vue 之外,它还具有React 和 Angular的版本。
官网:https://element.eleme.cn/
Element Plus - 经典中的经典,全面支持 Vue 3
官网:https://element-plus.org/

Ant Design of Vue

Ant Design Vue 是 Ant Design 的 Vue 实现,Ant Design 作为一门设计语言已经经历了多年的迭代和积累,它对 UI 的设计思想已经成为一套标准,也是 React 开发者手中的神器,Ant Design Vue 的组件风格与 Ant Design 保持同步,组件的 html 结构和 css 样式也保持一致,真正做到了样式 0 修改,组件 API 也尽量保持了一致。

官网:https://tdesign.tencent.com/

Vuetify 3

Vuetify 老牌 Vue UI 组件库,它提供了丰富的常用组件(有超过 100 个组件),适用于多数场景下的使用情况。Vuetify 基于谷歌的 Material Design 样式开发,无需写一行 CSS 就能生成相当整洁清爽的界面功能。Vuetify 支持 PC 端和移动端,对移动端有特别棒的优化,响应式,配置简单,带有响应式网络系统,支持事件处理,支持多种浏览器,甚至连 IE 11 也支持。Vuetify 已经发布支持 Vue 3 的版本,如果正在考虑未来的迁移问题,可放心使用。

官网:https://next.vuetifyjs.com

VUX

VUX 是基于 WeUI 和 Vue(2.x) 开发的移动端UI组件库,主要服务于微信页面。基于webpack + vue-loader + vux可以快速开发移动端页面,配合 vux-loader 方便在WeUI的基础上定制需要的样式。vux-loader 保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。VUX 并不完全依赖于 WeUI (微信的设计 UI 库),VUX 在 WeUI 的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近 WeUI 的设计规范。

官网:https://www.naiveui.com/zh-CN/os-theme

TDesign Vue

作为一款诞生于腾讯内部的 UI 组件库,经过腾讯内部 500+ 项业务检验的企业级设计体系,不仅仅是前端 UI 库,更是前端的设计指南和设计体系。支持Vue2 和 Vue 3 以及腾讯小程序。

官网:https://tdesign.tencent.com/

ArcoDesign Vue

ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统,打磨沉淀 3 年之后开源,ArcoDesign 与 TDesign 开源也就是前后脚的事,让我们通过这两套开源组件,看到大厂在前端完备的设计理念和工整的生产流程。

官网:https://arco.design/

Naive UI

Naive UI 上来直接支持 Vue3 ,不支持 Vue 2 。内置超过 80 个常用组件,支持按需引入,支持 Tree-shaking (树摇优化,当引入一个模块时,不引入全部,只引入所需代码,打包体积大幅减小)Naive UI 全量使用 TypeScript 编写,和你的 TypeScript 项目无缝衔接,速度不错。当然,你不需要写任何 CSS 就能让组件正常跑起来。

官网:https://www.naiveui.com/zh-CN/os-theme

LuLu UI

LuLu UI 是阅文集团出品的前端 UI 组件库,发布于 2015年,非 KPI 项目,脱胎于真实的业务场景,保持迭代多年。支持 Vue /React ,在这篇写 Vue 的文章中推荐原生 UI 库的原因是,如果碰到跨平台的项目,比如公司两个项目一个用 React 一个用 Vue ,如果想统一 UI 库,那么两边都需要考虑对方的规则,而使用对 Vue 和 React 都支持特别好的原生 UI 库就能较好的解决这类冲突的问题。

官网:https://l-ui.com/

Vuestic UI

Vuestic UI 是由 Epicmax 团队(Epicmax 是全球 Vue 前 15 顶级开发团队)开发的 Vue 3 前端 UI 库,对移动端和 PC 端有非常好的优化,支持 Vue 3 内置 50+ 个响应式组件,功能和应用场景丰富。支持 CSS 全局配置组件,支持 Tree-shaking 优化,大幅降低打包体积,支持 i18n 多语言国际化。Vuestic UI 设计非常欧美,这一点有好有坏。如果你的项目自由度比较高,使用 Vuestic UI 会让人眼前一亮,无论是配色上,还是动效上都是国内 UI 库不常有的做法,但缺点也是在这里,有可能会它的交互和动效与国内常规习惯不符,可能引来一些麻烦。

官网:https://epicmax.co/

Vant 3

Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。Vant 3 的性能极佳,组件平均尺寸小于 1KB (min+gzip),内置 65 + 个高质量组件,覆盖了主流使用场景中的多数需求。支持 Vue 2、Vue 3 和 微信小程序,有 700+ 个主题变量,引入了 Tree-Shaking 可按需引入组件,减小打包体积。

官网:https://youzan.github.io/vant/

NutUI 3.0

NutUI 3.0 是京东发布的 Vue 3 移动端 UI 组件库。对移动端友好,特别针对移动端电商业务场景优化测试。70+ 高质量 UI 组件,基于京东 APP 10.0 对视觉规范开发,支持按需引用,支持 TypeScript,支持主题定制。

官网:https://nutui.jd.com/3x/

View UI

View UI 就是原来的 iView UI 是基于 Vue 开发的开源 UI 组件库,主要服务于 PC 端的中后台产品。iView 这么多年已经走出了一套自己的风格,专注于做企业级中后台产品链条上的一环,对to b 业务场景的理解和思考有着多年的技术沉淀和实践经验。iView 不仅文档清晰,也有非常大的开发者社区,大多数奇怪的边角问题,都能在社区里找到答案,是对文档的不错补充。

官网:https://www.iviewui.com/

标签: 前端 vue.js ui

本文转载自: https://blog.csdn.net/weixin_49918657/article/details/135103378
版权归原作者 rainux. 所有, 如有侵权,请联系我们删除。

“12 款在手,前端无忧——Vue UI 组件库”的评论:

还没有评论