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

57次阅读

共计 5289 个字符,预计需要花费 14 分钟才能阅读完成。

本文首发:《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 款式开发

如果你正在搭建后盾管理工具,又不想解决前端问题,举荐应用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API,无需懂前端,仅需拖拽即可疾速搭建属于你本人的后盾管理工具,一周工作量缩减至一天,详见本文文末。

Element Plus – 经典中的经典,全面反对 Vue 3

  • 官网:https://element-plus.org/
  • github:https://github.com/element-pl…

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 预览性能

TDesign Vue – 鹅厂优质 UI 组件,配套工具完美,设计工整,文档清晰

  • 官网:https://tdesign.tencent.com/
  • github:https://github.com/Tencent/td…

TDesign 在去年刚刚开源,作为一款诞生于腾讯外部的 UI 组件库,通过腾讯外部 500+ 项业务测验的企业级设计体系,不仅仅是前端 UI 库,更是前端的设计指南和设计体系。反对 Vue2 和 Vue 3 以及腾讯小程序。

TDesign 作为大厂打磨多年后开源的 UI 组件库,文档写的十分好,不仅有「代码例子」还有「设计指南」。让你从多方面了解一个知识点,即使是萌新,也能轻松把握。

TDesign 还提供了辅助设计工具及设计资源,大家罕用的设计工具都能找到对应的设计物料。流程标准,应用清晰,强烈推荐。

扩大浏览:Vue 搭建带预览的「上传图片」治理后盾

ArcoDesign Vue- 字节优质 UI 组件库开源,大厂逻辑,设计文档完满

  • 官网:https://arco.design/
  • github:https://github.com/arco-desig…

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

这套 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 Vue 是 Ant Design 的 Vue 实现,Ant Design 作为一门设计语言曾经经验了多年的迭代和积攒,它对 UI 的设计思维曾经成为一套规范,也是 React 开发者手中的神器,Ant Design Vue 的组件格调与 Ant Design 放弃同步,组件的 html 构造和 css 款式也保持一致,真正做到了款式 0 批改,组件 API 也尽量放弃了统一。

当然,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…

Naive UI 能够说是宝藏 Vue UI 库,尤大还举荐了这个开源我的项目。Naive UI 上来间接反对 Vue3,不反对 Vue 2。内置超过 80 个罕用组件,反对按需引入,反对 Tree-shaking(树摇优化,当引入一个模块时,不引入全副,只引入所需代码,打包体积大幅减小)Naive UI 全量应用 TypeScript 编写,和你的 TypeScript 我的项目无缝连接,速度不错。当然,你不须要写任何 CSS 就能让组件失常跑起来。

扩大浏览:如何在 Vue 中退出图表 – Vue echarts 应用教程

VUX – 挪动端 UI 组件库,对微信敌对反对

  • 官网:https://doc.vux.li/zh-CN/
  • github:https://github.com/airyland/vux

VUX 是一款低调的挪动端 Vue UI 组件库,纯靠作者个人兴趣反对,曾经保护了 5、6 年了。次要服务于挪动端,对微信敌对反对。反对 vux-loader 保障了组件按需应用,不必放心打包体积过大。VUX 并不齐全依赖于 WeUI (微信的设计 UI 库),VUX 在 WeUI 的根底上扩大了多个罕用组件,然而尽量放弃整体 UI 款式靠近 WeUI 的设计规范。

扩大浏览:最好用的 5 个 Vue select 单选多选下拉组件

LuLu UI – 腾讯阅文前端出品 侧重于 C 端用户界面,轻量麻利

  • 官网: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 路由

Vuestic UI – 寰球 Vue 前 15 顶级团队开发,国际化劣势

  • 官网:https://epicmax.co/
  • github:https://github.com/epicmaxco/…

Vuestic UI 是由 Epicmax 团队(Epicmax 是寰球 Vue 前 15 顶级开发团队)开发的 Vue 3 前端 UI 库,对挪动端和 PC 端有十分好的优化,反对 Vue 3 内置 50+ 个响应式组件,性能和利用场景丰盛。反对 CSS 全局配置组件,反对 Tree-shaking 优化,大幅升高打包体积,反对 i18n 多语言国际化。Vuestic UI 设计十分欧美,这一点有好有坏。如果你的我的项目自由度比拟高,应用 Vuestic UI 会让人眼前一亮,无论是配色上,还是动效上都是国内 UI 库不常有的做法,但毛病也是在这里,有可能会它的交互和动效与国内惯例习惯不符,可能引来一些麻烦。Vuestic UI 有搭配的 admin 后盾。

扩大浏览:最好用的 7 款 Vue admin 后盾治理框架测评

Vant 3 – 有赞团队开源挪动 UI 组件库,全面反对 Vue 3

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

Vant 是有赞前端团队开源的挪动端组件库,于 2017 年开源。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

NutUI 3.0 是京东公布的 Vue 3 挪动端 UI 组件库。对挪动端敌对,特地针对挪动端电商业务场景优化测试。70+ 高质量 UI 组件,基于京东 APP 10.0 对视觉标准开发,反对按需援用,反对 TypeScript,反对主题定制。能够应用 Vue 语言来编写在 H5、小程序平台上的利用,帮忙咱们晋升开发效率,改善开发体验。

扩大浏览:Axios 教程:Vue + Axios 装置及实战 – 手把手教你搭建加密币实时价格看板

View UI – 企业级 to b 中后盾 UI 组件库,面向企业敌对

  • 官网:https://www.iviewui.com/
  • github:https://github.com/view-desig…

View UI 就是原来的 iView UI 是基于 Vue 开发的开源 UI 组件库,次要服务于 PC 端的中后盾产品。iView 这么多年曾经走出了一套本人的格调,专一于做企业级中后盾产品链条上的一环,对 to b 业务场景的了解和思考有着多年的技术积淀和实践经验。

iView 不仅文档清晰,也有十分大的开发者社区,大多数奇怪的边角问题,都能在社区里找到答案,是对文档的不错补充。

扩大浏览:最好用的 7 个 Vue Tree select 树形组件

Vuetify 3 – 老牌 Vue UI,基于谷歌的 Material Design 款式开发

  • 官网:https://next.vuetifyjs.com
  • github:https://github.com/vuetifyjs/…

Vuetify 老牌 Vue UI 组件库,它提供了丰盛的罕用组件(有超过 100 个组件),实用于少数场景下的应用状况。Vuetify 基于谷歌的 Material Design 款式开发,无需写一行 CSS 就能生成相当整洁清新的界面性能。Vuetify 反对 PC 端和挪动端,对挪动端有特地棒的优化,响应式,配置简略,带有响应式网络系统,反对事件处理,反对多种浏览器,甚至连 IE 11 也反对。Vuetify 曾经公布反对 Vue 3 的版本,如果正在思考将来的迁徙问题,可放心使用。

扩大浏览:最好的 5 款翻译 API 接口比照测评

总结

本文介绍了国内罕用的高质量开源 Vue UI 组件库。如果不想解决前端问题,举荐应用卡拉云,卡拉云内置各类组件,无需懂任何前端,仅需拖拽即可疾速生成。

下图为应用卡拉云搭建的外部广告投放监测零碎,仅需拖拽,1 小时搞定。

卡拉云是新一代低代码开发工具,免装置部署,可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流,定制开发。无需繁琐的前端开发,只须要简略拖拽,即可疾速搭建企业外部工具。 原来三天的开发工作量,应用卡拉云后可缩减至 1 小时,欢送收费试用卡拉云。

扩大浏览:

  • 最好用的七大顶级 API 接口测试工具
  • vue.draggable 入门指南 – 手把手教你开发工作看板
  • 最好用的 5 款 React 富文本编辑器
  • 最好用的 12 款 Vue Timepicker 工夫日期选择器测评举荐
  • 顶级好用的 5 款 Vue table 表格组件测评与举荐
  • Postman 应用教程 – 手把手教你 API 接口测试
  • 最好的 6 个收费天气 API 接口比照测评
  • 如何在 Vue 中导出数据至 Excel 表格
正文完
 0