12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐

HiJiangChuan · · 1066 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

本文首发:《[12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐](https://kalacloud.com/blog/best-vue-ui-component-libraries/)》 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 样式开发 如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用[卡拉云](https://kalacloud.com/),卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。 ## Element Plus - 经典中的经典,全面支持 Vue 3 ![01-element-plus](https://kalacloud.com/static/35e2795d02ed841c2a4996bd91ab91a5/3cd75/01-element-plus.jpg) - 官网:[https://element-plus.org/](https://element-plus.org/zh-CN/#/zh-CN) - github:<https://github.com/element-plus/element-plus> Element 支持 Vue 3 的版本来了,在 2022 年春节后第一个工作日,饿了么大前端团队发布了 Element Plus 正式版,标志着 Element 正式支持 Vue 3。前端迭代的进程就是这么快,一年前大家还在说 Vue 3 谨慎用在生产环境,现在铺天盖地的 UI 库,组件库开始全面支持 3 。 Element Plus 优秀的方面是常用组件写的非常扎实,比如日期时间选择器、树形组件、日历组件等,这些我们自己写太费劲了,引入第三方库又麻烦,如果选择的 UI 库写的很不错,节省非常多的时间。 Element Plus 在 Github 上瞬间拥有上万星星,已经成为 Github 上最受欢迎的 Vue3 UI 框架之一了。 扩展阅读:[Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能](https://kalacloud.com/blog/how-build-vuejs-pdf-viewer-pdfjs/) ## TDesign Vue - 鹅厂优质 UI 组件,配套工具完满,设计工整,文档清晰 ![02-tdesign](https://kalacloud.com/static/d6aaca76cfb2e8fda2c22ce9c04dd6a8/3cd75/02-tdesign.jpg) - 官网:<https://tdesign.tencent.com/> - github:<https://github.com/Tencent/tdesign-vue> TDesign 在去年刚刚开源,作为一款诞生于腾讯内部的 UI 组件库,经过腾讯内部 500+ 项业务检验的企业级设计体系,不仅仅是前端 UI 库,更是前端的设计指南和设计体系。支持[Vue2](https://tdesign.tencent.com/vue/overview) 和 [Vue 3](https://tdesign.tencent.com/vue-next/overview) 以及[腾讯小程序](https://tdesign.tencent.com/miniprogram/overview)。 TDesign 作为大厂打磨多年后开源的 UI 组件库,文档写的非常好,不仅有「代码例子」还有「设计指南」。让你从多方面理解一个知识点,即便是萌新,也能轻松掌握。 TDesign 还提供了辅助设计工具及设计资源,大家常用的设计工具都能找到对应的设计物料。流程规范,使用清晰,强烈推荐。 扩展阅读:[Vue 搭建带预览的「上传图片」管理后台](https://kalacloud.com/blog/vue-upload-image-axios/) ## ArcoDesign Vue- 字节优质 UI 组件库开源,大厂逻辑,设计文档完美 ![03-arcodesign](https://kalacloud.com/static/a6cfdc8fbaf2a7fea45ba10a5fbc6d5e/3cd75/03-arcodesign.jpg) - 官网:<https://arco.design/> - github:<https://github.com/arco-design/arco-design-vue> ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统,打磨沉淀 3 年之后[开源](https://juejin.cn/post/7023404037563219975),ArcoDesign 与 TDesign 开源也就是前后脚的事,让我们通过这两套开源组件,看到大厂在前端完备的设计理念和工整的生产流程。 这套 UI 库,基于 ArcoDesign 设计规范,Arco 同时提供了 React 和 Vue 两套 UI 组件库。Vue 组件库基于 Vue 3.0 开发,并配详细的 [Vue 3 上手文档](https://arco.design/vue/docs/start)。 扩展阅读:[如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表](https://kalacloud.com/blog/vue-chartjs-tutorial/) ## Ant Design of Vue - 阿里前端 UI 库,面向企业级中后台 ![04-antdesignvue](https://kalacloud.com/static/ea49cf33cb5677ad3098f023936776ba/3cd75/04-antdesignvue.jpg) - 官网:<https://next.antdv.com/components/overview-cn> - github:<https://github.com/vueComponent/ant-design-vue> Ant Design Vue 是 Ant Design 的 Vue 实现,Ant Design 作为一门设计语言已经经历了多年的迭代和积累,它对 UI 的设计思想已经成为一套标准,也是 React 开发者手中的神器,Ant Design Vue 的组件风格与 Ant Design 保持同步,组件的 html 结构和 css 样式也保持一致,真正做到了样式 0 修改,组件 API 也尽量保持了一致。 当然,Ant Design 也帮大家造好了轮子,[Antd Pro Vue](https://kalacloud.com/blog/best-vue-js-admin-dashboard/#%E4%BA%8C-antd-pro-vue---%E8%83%8C%E9%9D%A0%E9%98%BF%E9%87%8C%E4%BB%A3%E7%A0%81%E8%BF%87%E7%A1%AC%E5%A4%A7%E5%9E%8B%E9%A1%B9%E7%9B%AE%E9%A6%96%E9%80%89)(Vue admin 后台管理框架)请享用。 扩展阅读:[Vue + Node.js 搭建「文件上传」管理后台](https://kalacloud.com/blog/vue-axios-multiple-node-express-file-upload/) ## Naive UI - 宝藏 Vue UI 库,Vue UI 新星 ![05-Naive](https://kalacloud.com/static/f99dc05ddc7d71f0941a657cef43d578/3cd75/05-Naive.jpg) - 官网:<https://www.naiveui.com/zh-CN/os-theme> - github:<https://github.com/TuSimple/naive-ui> Naive UI 可以说是宝藏 Vue UI 库,尤大还推荐了这个开源项目。Naive UI 上来直接支持 Vue3 ,不支持 Vue 2 。内置超过 80 个常用组件,支持按需引入,支持 Tree-shaking (树摇优化,当引入一个模块时,不引入全部,只引入所需代码,打包体积大幅减小)Naive UI 全量使用 TypeScript 编写,和你的 TypeScript 项目无缝衔接,速度不错。当然,你不需要写任何 CSS 就能让组件正常跑起来。 扩展阅读:[如何在 Vue 中加入图表 - Vue echarts 使用教程](https://kalacloud.com/blog/vue-echarts-tutorial/) ## VUX - 移动端 UI 组件库,对微信友好支持 ![06-VUX](https://kalacloud.com/static/d7427fe2129803edf2afe5c3c2772906/11148/06-VUX.jpg) - 官网:<https://doc.vux.li/zh-CN/> - github:<https://github.com/airyland/vux> VUX 是一款低调的移动端 Vue UI 组件库,纯靠作者个人兴趣支持,已经维护了5、6年了。主要服务于移动端,对微信友好支持。支持 vux-loader 保证了组件按需使用,不用担心打包体积过大。VUX 并不完全依赖于 [WeUI](https://weui.io/) (微信的设计 UI 库),VUX 在 WeUI 的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近 WeUI 的设计规范。 扩展阅读:[最好用的 5 个 Vue select 单选多选下拉组件](https://kalacloud.com/blog/best-vue-multiple-select/) ## LuLu UI - 腾讯阅文前端出品 侧重于 C 端用户界面,轻量敏捷 ![07-LuLu](https://kalacloud.com/static/5f61020a0d1bbd9088070c4ec6432e33/11148/07-LuLu.jpg) - 官网:<https://l-ui.com/> - github:<https://github.com/yued-fe/lulu> LuLu UI 是阅文集团出品的前端 UI 组件库,发布于 2015年,非 KPI 项目,脱胎于真实的业务场景,保持迭代多年。 支持 Vue /React ,在这篇写 Vue 的文章中推荐原生 UI 库的原因是,如果碰到跨平台的项目,比如公司两个项目一个用 React 一个用 Vue ,如果想统一 UI 库,那么两边都需要考虑对方的规则,而使用对 Vue 和 React 都支持特别好的原生 UI 库就能较好的解决这类冲突的问题。所以想在这篇文章中放一个 LuLu UI 的推荐,给大家更多选择。当然,更灵活的组件库意味着需要写更多代码,这个大家根据自己的需求选择吧。 扩展阅读:[Vue Router 手把手教你搭 Vue3 路由](https://kalacloud.com/blog/vue-router-tutorial-for-vue-3/) ## Vuestic UI - 全球 Vue 前 15 顶级团队开发,国际化优势 ![08-VuesticUI](https://kalacloud.com/static/867cb26ee2548b21e059562613dc8524/11148/08-VuesticUI.jpg) - 官网:<https://epicmax.co/> - github:<https://github.com/epicmaxco/vuestic-ui> Vuestic UI 是由 [Epicmax](http://epicmax.co/) 团队(Epicmax 是[全球 Vue 前 15 顶级开发团队](https://selectedfirms.co/companies/vue-js-development))开发的 Vue 3 前端 UI 库,对移动端和 PC 端有非常好的优化,支持 Vue 3 内置 50+ 个响应式组件,功能和应用场景丰富。支持 CSS 全局配置组件,支持 Tree-shaking 优化,大幅降低打包体积,支持 i18n 多语言国际化。Vuestic UI 设计非常欧美,这一点有好有坏。如果你的项目自由度比较高,使用 Vuestic UI 会让人眼前一亮,无论是配色上,还是动效上都是国内 UI 库不常有的做法,但缺点也是在这里,有可能会它的交互和动效与国内常规习惯不符,可能引来一些麻烦。Vuestic UI 有搭配的 admin 后台。 扩展阅读:[最好用的 7 款 Vue admin 后台管理框架测评](https://kalacloud.com/blog/best-vue-js-admin-dashboard/) ## Vant 3 - 有赞团队开源移动 UI 组件库,全面支持 Vue 3 ![09-vant3](https://kalacloud.com/static/b1ae9fecbe4d178a6926deeb975d2a5f/11148/09-vant3.jpg) - 官网:[https://youzan.github.io/vant/](https://youzan.github.io/vant/#/zh-CN) - github:<https://github.com/youzan/vant> Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。 Vant 3 的性能极佳,组件平均尺寸小于 1KB (min+gzip),内置 65 + 个高质量组件,覆盖了主流使用场景中的多数需求。支持 [Vue 2](https://vant-contrib.gitee.io/vant/v2)、[Vue 3](https://vant-contrib.gitee.io/vant) 和 [微信小程序](http://vant-contrib.gitee.io/vant-weapp),有 700+ 个主题变量,引入了 Tree-Shaking 可按需引入组件,减小打包体积。 扩展阅读:[最好用的 7 款 Vue 富文本编辑器](https://kalacloud.com/blog/vue-richtext-editor/) ## NutUI 3.0 - 京东出品,移动端友好,面向电商业务场景 ![10-nutui](https://kalacloud.com/static/e88ccef463d022719223868dabd424ae/11148/10-nutui.jpg) - 官网:<https://nutui.jd.com/3x/> - github:<https://github.com/jdf2e/nutui> NutUI 3.0 是京东发布的 Vue 3 移动端 UI 组件库。对移动端友好,特别针对移动端电商业务场景优化测试。70+ 高质量 UI 组件,基于京东 APP 10.0 对视觉规范开发,支持按需引用,支持 TypeScript,支持主题定制。可以使用 Vue 语言来编写在 H5、小程序平台上的应用,帮助我们提升开发效率,改善开发体验。 扩展阅读:[Axios 教程:Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板](https://kalacloud.com/blog/vue-axios-tutorial/) ## View UI - 企业级 to b 中后台 UI 组件库,面向企业友好 ![11-viewui](https://kalacloud.com/static/d64dd4bfbc52e557fcb08dfcd077b77a/11148/11-viewui.jpg) - 官网:<https://www.iviewui.com/> - github:<https://github.com/view-design/ViewUI> View UI 就是原来的 iView UI 是基于 Vue 开发的开源 UI 组件库,主要服务于 PC 端的中后台产品。iView 这么多年已经走出了一套自己的风格,专注于做企业级中后台产品链条上的一环,对to b 业务场景的理解和思考有着多年的技术沉淀和实践经验。 iView 不仅文档清晰,也有非常大的开发者社区,大多数奇怪的边角问题,都能在社区里找到答案,是对文档的不错补充。 扩展阅读:[最好用的 7 个 Vue Tree select 树形组件](https://kalacloud.com/blog/best-vue-tree-view/) ## Vuetify 3 - 老牌 Vue UI ,基于谷歌的 Material Design 样式开发 ![12-vuetify3](https://kalacloud.com/static/ef0071048a53f37d4c7cebebfb9f9129/11148/12-vuetify3.jpg) - 官网:[https://next.vuetifyjs.com](https://next.vuetifyjs.com/) - github:<https://github.com/vuetifyjs/vuetify> Vuetify 老牌 Vue UI 组件库,它提供了丰富的常用组件(有超过 100 个组件),适用于多数场景下的使用情况。Vuetify 基于谷歌的 Material Design 样式开发,无需写一行 CSS 就能生成相当整洁清爽的界面功能。Vuetify 支持 PC 端和移动端,对移动端有特别棒的优化,响应式,配置简单,带有响应式网络系统,支持事件处理,支持多种浏览器,甚至连 IE 11 也支持。Vuetify 已经发布支持 Vue 3 的版本,如果正在考虑未来的迁移问题,可放心使用。 扩展阅读:[最好的 5 款翻译 API 接口对比测评](https://kalacloud.com/blog/best-translation-api/) ## 总结 本文介绍了国内常用的高质量开源 Vue UI 组件库 。如果不想处理前端问题,推荐使用[卡拉云](https://kalacloud.com/blog/best-vue-ui-component-libraries/kalacloud.com),卡拉云内置各类组件,无需懂任何前端,仅需拖拽即可快速生成。 下图为使用卡拉云搭建的内部广告投放监测系统,仅需拖拽,1小时搞定。 ![09-kalacloud](https://kalacloud.com/static/b9481a4b63d08768c2658fa50e81cd84/42be1/09-kalacloud.jpg) 卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。**原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费[试用卡拉云](https://kalacloud.com/)。** 扩展阅读: - [最好用的七大顶级 API 接口测试工具](https://kalacloud.com/blog/api-testing-tools/) - [vue.draggable 入门指南 - 手把手教你开发任务看板](https://kalacloud.com/blog/vue-draggable-tutorial/) - [最好用的 5 款 React 富文本编辑器](https://kalacloud.com/blog/top-5-rich-text-editors-for-react/) - [最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐](https://kalacloud.com/blog/best-vue-date-timepicker-components/) - [顶级好用的 5 款 Vue table 表格组件测评与推荐](https://kalacloud.com/blog/best-vue-data-table-grid/) - [Postman 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/postman-tutorial/) - [最好的 6 个免费天气 API 接口对比测评](https://kalacloud.com/blog/free-weather-api/) - [如何在 Vue 中导出数据至 Excel 表格](https://kalacloud.com/blog/vue-export-json-to-excel-csv/)

有疑问加站长微信联系(非本文作者))

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1066 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传