12|12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐
本文首发:《12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐》
Vue 3 发布已经有一段时间了,就在刚刚过去的一年,各大组件库、框架纷纷对 Vue 3 做了优化和支持。整个前端从谨慎使用 Vue 3 转向了开始拥抱 Vue 3。特别是年初年末几家大厂陆续开源或新发布了支持 Vue 3 的组件库或框架,非常值得在本文安利一波。本文推荐 12 款适用于中文使用者习惯的开源 Vue 3 UI 库或支持 Vue 3 的开源 UI 库。
我筛选了国内常用的开源前端 UI 库,选出了 12 款来自国内互联网一线大厂或是商业化较好的企业 / 个人长期维护的免费开源 UI 库分享给大家。
- Element Plus - 经典中的经典,全面支持 Vue 3
- TDesign - 鹅厂优质 UI 组件,配套工具完满,设计工整,文档清晰
- ArcoDesign - 字节跳动 UI 组件库开源,大厂逻辑,设计文档完美
- Ant Design Vue - 阿里前端 UI 库,面向企业级中后台
- Naive UI - 宝藏 Vue UI 库,Vue UI 新星,从 Vue 3 起步
- VUX - 移动端 UI 组件库,对微信友好支持
- LuLu UI - 腾讯阅文前端出品 侧重于 C 端用户界面,轻量敏捷
- Vant 3 - 有赞团队开源移动 UI 组件库,全面支持 Vue 3
- Vuestic UI - 全球 Vue 前 15 顶级团队开发,国际化优势
- NutUI 3.0 - 京东出品,移动端友好,面向电商业务场景
- View UI - 企业级 to b 中后台 UI 组件库,面向企业友好
- Vuetify 3 - 老牌 Vue UI ,基于谷歌的 Material Design 样式开发
Element Plus - 经典中的经典,全面支持 Vue 3
文章图片
- 官网:https://element-plus.org/
- github:https://github.com/element-pl...
Element Plus 优秀的方面是常用组件写的非常扎实,比如日期时间选择器、树形组件、日历组件等,这些我们自己写太费劲了,引入第三方库又麻烦,如果选择的 UI 库写的很不错,节省非常多的时间。
Element Plus 在 Github 上瞬间拥有上万星星,已经成为 Github 上最受欢迎的 Vue3 UI 框架之一了。
扩展阅读:Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能
TDesign Vue - 鹅厂优质 UI 组件,配套工具完满,设计工整,文档清晰
文章图片
- 官网:https://tdesign.tencent.com/
- github:https://github.com/Tencent/td...
TDesign 作为大厂打磨多年后开源的 UI 组件库,文档写的非常好,不仅有「代码例子」还有「设计指南」。让你从多方面理解一个知识点,即便是萌新,也能轻松掌握。
TDesign 还提供了辅助设计工具及设计资源,大家常用的设计工具都能找到对应的设计物料。流程规范,使用清晰,强烈推荐。
扩展阅读:Vue 搭建带预览的「上传图片」管理后台
ArcoDesign Vue- 字节优质 UI 组件库开源,大厂逻辑,设计文档完美
文章图片
- 官网:https://arco.design/
- github:https://github.com/arco-desig...
这套 UI 库,基于 ArcoDesign 设计规范,Arco 同时提供了 React 和 Vue 两套 UI 组件库。Vue 组件库基于 Vue 3.0 开发,并配详细的 Vue 3 上手文档。
扩展阅读:如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
Ant Design of Vue - 阿里前端 UI 库,面向企业级中后台
文章图片
- 官网:https://next.antdv.com/compon...
- github:https://github.com/vueCompone...
当然,Ant Design 也帮大家造好了轮子,Antd Pro Vue(Vue admin 后台管理框架)请享用。
扩展阅读:Vue + Node.js 搭建「文件上传」管理后台
Naive UI - 宝藏 Vue UI 库,Vue UI 新星
文章图片
- 官网:https://www.naiveui.com/zh-CN...
- github:https://github.com/TuSimple/n...
扩展阅读:如何在 Vue 中加入图表 - Vue echarts 使用教程
VUX - 移动端 UI 组件库,对微信友好支持
文章图片
- 官网:https://doc.vux.li/zh-CN/
- github:https://github.com/airyland/vux
扩展阅读:最好用的 5 个 Vue select 单选多选下拉组件
LuLu UI - 腾讯阅文前端出品 侧重于 C 端用户界面,轻量敏捷
文章图片
- 官网:https://l-ui.com/
- github:https://github.com/yued-fe/lulu
支持 Vue /React ,在这篇写 Vue 的文章中推荐原生 UI 库的原因是,如果碰到跨平台的项目,比如公司两个项目一个用 React 一个用 Vue ,如果想统一 UI 库,那么两边都需要考虑对方的规则,而使用对 Vue 和 React 都支持特别好的原生 UI 库就能较好的解决这类冲突的问题。所以想在这篇文章中放一个 LuLu UI 的推荐,给大家更多选择。当然,更灵活的组件库意味着需要写更多代码,这个大家根据自己的需求选择吧。
扩展阅读:Vue Router 手把手教你搭 Vue3 路由
Vuestic UI - 全球 Vue 前 15 顶级团队开发,国际化优势
文章图片
- 官网:https://epicmax.co/
- github:https://github.com/epicmaxco/...
扩展阅读:最好用的 7 款 Vue admin 后台管理框架测评
Vant 3 - 有赞团队开源移动 UI 组件库,全面支持 Vue 3
文章图片
- 官网:https://youzan.github.io/vant/
- github:https://github.com/youzan/vant
Vant 3 的性能极佳,组件平均尺寸小于 1KB (min+gzip),内置 65 + 个高质量组件,覆盖了主流使用场景中的多数需求。支持 Vue 2、Vue 3 和 微信小程序,有 700+ 个主题变量,引入了 Tree-Shaking 可按需引入组件,减小打包体积。
扩展阅读:最好用的 7 款 Vue 富文本编辑器
NutUI 3.0 - 京东出品,移动端友好,面向电商业务场景
文章图片
- 官网:https://nutui.jd.com/3x/
- github:https://github.com/jdf2e/nutui
扩展阅读:Axios 教程:Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板
View UI - 企业级 to b 中后台 UI 组件库,面向企业友好
文章图片
- 官网:https://www.iviewui.com/
- github:https://github.com/view-desig...
iView 不仅文档清晰,也有非常大的开发者社区,大多数奇怪的边角问题,都能在社区里找到答案,是对文档的不错补充。
扩展阅读:最好用的 7 个 Vue Tree select 树形组件
Vuetify 3 - 老牌 Vue UI ,基于谷歌的 Material Design 样式开发
文章图片
- 官网:https://next.vuetifyjs.com
- github:https://github.com/vuetifyjs/...
扩展阅读:最好的 5 款翻译 API 接口对比测评
总结 本文介绍了国内常用的高质量开源 Vue UI 组件库 。如果不想处理前端问题,推荐使用卡拉云,卡拉云内置各类组件,无需懂任何前端,仅需拖拽即可快速生成。
【12|12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐】下图为使用卡拉云搭建的内部广告投放监测系统,仅需拖拽,1小时搞定。
文章图片
卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云。
扩展阅读:
- 最好用的七大顶级 API 接口测试工具
- vue.draggable 入门指南 - 手把手教你开发任务看板
- 最好用的 5 款 React 富文本编辑器
- 最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐
- 顶级好用的 5 款 Vue table 表格组件测评与推荐
- Postman 使用教程 - 手把手教你 API 接口测试
- 最好的 6 个免费天气 API 接口对比测评
- 如何在 Vue 中导出数据至 Excel 表格
推荐阅读
- 前端|IDEA安装element-ui报错npm ERR Found vue@3.2.26npm ERR node_modulesvuenpm ERR vue@“^3.0.0“ from
- 前端vue下载文件时blob返回流中怎么获取文件名
- Vue中组件的递归
- 前端|面试官(为什么Vue中的v-if和v-for不建议一起用)
- 【源码】vuex@3.6.3
- VUE3|VUE3 之 使用标签实现动画与过渡效果(下) - 这个系列的教程通俗易懂,适合新手
- Vue3|Vue3 如何实现全局异常处理()
- Vue项目
- Taro|Taro (VUE style) 项目增加lint以及git hooks
- Vue|Vue 响应式原理