草庐IT

2023值得推荐的高颜值Vue3.0 Web PC端UI框架,赶紧收藏学习!

前端胡说 2023-04-21 原文

Hello,我是前端胡说,本期给大家带来2023值得推荐的Vue3.0 UI组件库,希望大家喜欢!

Vue3 正式发布已经有一段时间了,2022年2月也正式变成 Vue 项目的默认版本。在过去一年多的时间里,各大组件库、框架也紧跟时代的步伐,纷纷对 Vue3 做了大量的支持和优化,从个人到公司企业也开始拥抱 Vue3.0。在这个过程中,也陆续涌现出很多优秀的开源组件库或框架,非常值得我们去学习和使用。下面本文就给大家整理分享几个 Vue3 实用的Web端UI组件库,多了解学习一个新的知识,可以提高我们的“搬砖”效率和速度,希望对大家有所帮助!

1、Element Plus

Element Plus 一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。Element UI 在 Vue2 中很受开发者欢迎,Element Plus 依旧延续了 Vue2 Element UI 的优秀风格,重构了已有的组件,并且新增了一些新的组件,比如TreeSelect 树形选择、Virtualized Table 虚拟化表格等。

Element Plus目前已有近70个组件,在 GitHub 上更是拥有 18.6k+ Star,正在成为 Github 上最受欢迎的 Vue3 UI 框架之一,它以优秀的UI风格、及时更新、良好的交互体验、更高效的开发和通过SCSS变量的高定制性达到了开发者的期望。

官方网站:https://element-plus.org

国内加速镜像:https://element-plus.gitee.io

源码地址:https://github.com/element-plus/element-plus

2、Ant Design Vue

众所周知,Ant Design 作为一门设计语言面世,经历过多年的迭代和积累,它对 UI 的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,是前端开发者手中的神兵利器。

ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步,组件的 html 结构和 css 样式也保持一致,真正做到了样式 0 修改,组件 API 也尽量保持了一致。

ant-design-vue 目前已有60+个组件,在 GitHub 上已拥有 17.7k+ Star,Vue3包体积更小,更快,并且支持 SSR,基本覆盖项目大部分需求。

官方网站:https://www.antdv.com/

源码地址:https://github.com/vueComponent/ant-design-vue

3、arco.design

arco.design 是字节跳动推出的UI组件库,目前有React和Vue两个版本。arco.design 是由 Byte Design 升级而来,经过了字节跳动内部的大量的业务沉淀和使用验证,第一个版本于2021年10月发布,可能了解和使用的人还很少。开源社区多一个UI组件库不仅前端繁荣了前端UI库,对程序猿/媛来说又多了一个选择,毕竟是大厂出品,还是不错的。

arco.design 为更多中小型企业及个人设计师和开发者提效,创造更多高效美观的 “最佳实践”。其产品生态也很丰富,风格配置平台(Design Lab) 和 色彩配置工具(Palette) 支持在线构建并实时预览个性化主题和色板,让用户所见即所得的聚焦于设计创作与应用。物料市场 (Material Market)和图标平台(Iconbox)提供了完善的工具和流程帮助业务团队快速构建业务定制图标、组件、模块、页面等可复用资产。中后台最佳实践(Arco Pro) 整理了常见的典型页面场景,帮助用户更快速地从 0 到 1 构建项目。更多的开发优势,比如React 和 Vue 同步支持、暗黑模式、沉浸式的开发文档体验、二次开发和复用能力等。

官方网站:https://arco.design/

源码地址:https://github.com/arco-design/arco-design

4、Naive UI

这是一个尤大大都推荐的Vue3 UI组件库!为什么尤大大会推荐它呢?

Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript 技栈开发的前端 UI 组件库,作者来自图森未来公司。虽然不是头部大厂出品,但是足够优秀!它提供了80+个精良的组件,这些组件可以无缝地融入几乎任何类型的 Vue3应用。

Naive UI 是一款漂亮大气、交互效果优秀的开源组件库,再加上尤大大的转发推荐,给 Naive UI 带来了大量的流量,目前在Github上已有11.7k Star,开发文档风趣幽默,相信以后会越来越好。

官方网站:https://www.naiveui.com/

源码地址:https://github.com/tusen-ai/naive-ui

5、DevUI

DevUI是华为云开源的企业级UI组件库,2021年1月9日Vue DevUI 1.0 正式发布,支持Vue3.0。如今,它已经包含了55个简单、易用、灵活的高质量组件。

Vue DevUI 沉淀自华为软开云众多业务的优秀实践,70+社区开发者一起参与共建,包含 DatePickerPro、Splitter、Ripple 等多个特色组件。Vue DevUI 使用积木理论进行组件的设计和开发,尽可能平衡灵活性和易用性。对于 Table、Tree 等复杂组件,使用 Composition API 进行交互逻辑的拆分,确保组件的可扩展性和可维护性。

官方网站:https://vue-devui.github.io/

源码地址:https://github.com/DevCloudFE/vue-devui

6、View Design

View UI Plus 是 View Design 设计体系中基于 Vue.js 3 的一套 UI 组件库,主要用于企业级中后台系统,提供了超过 80 个常用底层组件。主要特点有丰富的组件和功能,满足绝大部分网站场景;提供开箱即用的 Admin 系统 和 快速增删改查表格组件,极大程度节省开发成本;友好的 API ,自由灵活地使用空间;细致、漂亮的 UI;事无巨细的文档;可自定义主题等。

View UI Plus是 Vue3.0 版本,它的 Vue2.0 叫做 iView ui 是我进入职场用的第一个UI组件库,是一款不错的开源UI组件库。

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

源码地址:https://github.com/view-design/ViewUIPlus

7、KingDesign

KingDesign设计系统是⾦⼭云基于多年的企业级产品设计开发经验,以⾦⼭云设计语⾔为基础,⽤于企业级产品的开源设计系统,该系统由组件、开发、设计资源、⼯具、解决⽅案、设计指南组成,⽤户可使⽤KingDesign设计系统快速构建⼀致的数字产品。

为了更适⽤于企业级产品的开发和使⽤,通过⼤量中后台场景的实践,King Design设计系统提炼出以下设计原则:⾼效,整体优化设计与前端⼯作流程,做到全局标准化的产品构建。且组件更适⽤于企业操作类的产品,为⽤户带来更便捷的体验。统⼀,在产品设计中,相同的问题使⽤相同的解决⽅案,让产品家族更具⼀致性。灵活,为了让设计系统有效地扩展,King Design设计系统在⼀致性与灵活性之间达到了⼀种平衡,可⽀持企业多种业务和产品。

官方网站:https://design.ksyun.com/

源码地址:https://github.com/ksc-fe/kpc

8、iDux

iDux 是来自深信服科技的前端团队开发的一套企业级中后台 UI 组件库,致力于提供高效愉悦的开发体验。基于 Vue 3.x + TypeScript 开发, 全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。

iDux包含基础组件、高级组件、开发套件。主要特性有:全面拥抱 Composition API,从源码到文档;完全使用 TypeScript 开发,提供完整的类型定义;Monorepo 管理模式:cdk, components, pro;开箱即用的高质量组件;灵活的全局配置;深入细节的主题定制能力;国际化语言支持。

官方网站:https://idux.site/

源码地址:https://github.com/IDuxFE/idux

9、Balm UI

BalmUI 是一款由 Balm.js (一款类似 Vue CLI 的前端工作流工具)团队打造前端 UI 组件库,基于最新的 Vue 3 构建,开箱即用,定制化强,设计风格完全遵循谷歌的 Material Design 设计规范,组件均可高定制化且可被独立使用,是一款交互体验非常优秀的 UI 组件库。

官方网站:https://material.balmjs.com/

源码地址:https://github.com/balmjs/balm-ui

10、PrimeVue

PrimeVue 由 PrimeTek Informatics 开发的新 UI 库。在官方新闻稿中,PrimeTek 表示“PrimeVue 是最完整的 Vue UI 组件套件,具有 50 多个组件、主题设计器、各种 VueCLI 模板和专业支持”。不过,目前已更新到90+个组件,如FloatLabel、Dock、Chart等组件,而且有多种主体可选和一些独特体验的组件,目前github上已有3.3k+ Star。不过目前只有英文文档。

官方网站:https://primevue.org/

源码地址:https://github.com/primefaces/primevue

11、Vuestic UI

Vuestic UI 是一套由 Epicmax 团队开发的一套基于 Vue.js 的 web 开发组件库,是一个免费开源的UI框架,包含50多个功能丰富的组件,希望用 Vue .js 的专业知识以最佳方式构建一个可用性强且全面的开源工具。Vuestic UI 在发布后不久,便成为使用 Vue 构建的最受欢迎的组件库之一。

它响应迅速,易于定制,具有组件、图标和颜色的深入配置选项。响应式的设计使这些组件不仅能用在 web PC 项目上,而且几乎适用于任何屏幕大小的分辨率。 键盘可用性是 Vuestic 的特色功能,在整个框架中提供无缝键盘操作支持,这在其它流行的组件库中是不多见的。支持树摇优化,减少打包体积。Vuestic UI与Vue 3、i18n兼容,支持所有现代浏览器。

官方网站:https://madewithvuejs.com/vuestic-ui

源码地址:https://github.com/epicmaxco/vuestic-ui

后记

多了解,多学习这些UI组件库,一方面可以增加我们的见识,多一个组件库就多了一个选择,另一方面我们更多地应该学习这些组件库的设计思想和思路,从而提高我们自己的能力。这些UI组件库可以根据自己的项目需要选择性地使用,希望这篇文章对大家有所帮助,文章中有不当之处欢迎大家指出并改正,欢迎大家点赞、转发、关注!

原文链接:https://mp.weixin.qq.com/s?__biz=MzkzNzMyMjQzMQ==&mid=2247491671&idx=1&sn=110df8af2fbd19817b586bac2417b8c6&chksm=c2939287f5e41b91f5b5905fd7b1c34c84a548c495e3c99f222cc78f568f29265093633985f0&token=1874314220&lang=zh_CN#rd添加链接描述

有关2023值得推荐的高颜值Vue3.0 Web PC端UI框架,赶紧收藏学习!的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - Rails 中的推荐引擎 - 2

    我想为我的Rails网络应用程序提供推荐功能。特别是,我想向新注册的用户推荐他可能想要关注的其他用户。Rails中是否有用于此目的的引擎/gem?如果没有,我应该从哪里开始构建它?谢谢。 最佳答案 有Coletivogemhttps://github.com/diogenes/coletivo我试了一下。在MySQL上运行。Neo4jhttp://neo4j.org真的很容易实现一个“跟随谁”。事实上,大多数展示其能力的样本都涉及“跟随谁”。快速提示-只有在JRuby上运行时,Neo4j.rb才会很酷。如果不是-使用Neograph

  3. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf),开发人员无需担心javascript或jquery的东西。据我所知,JSF是一个规范,基于规范的各种可用实现,prim

  4. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  5. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  6. CAN协议的学习与理解 - 2

    最近在学习CAN,记录一下,也供大家参考交流。推荐几个我觉得很好的CAN学习,本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门,真的通透;秀!靠这篇我竟然2天理解了CAN协议!实战STM32F4CAN!原文链接:https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解(小白教程)原文链接:https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  7. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  8. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  9. TimeSformer:抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”,各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解,本篇主要介绍了FBAI团队的TimeSformer,这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用,就请点赞、收藏、关注!paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  10. ruby-on-rails - 一般建议和推荐的文件夹结构 - Sinatra - 2

    您将如何构建一个简单的Sinatra应用程序?我正在制作,我希望该应用具有以下功能:“应用程序”更像是一个包含所有信息的管理仪表板。然后另一个应用程序将通过REST访问信息。我还没有创建仪表板,只是从数据库中获取东西session和身份验证(尚未实现)您可以上传图片,其他应用可以显示这些图片我已经使用RSpec创建了一个测试文件通过Prawn生成报告目前的设置是这样的:app.rbtest_app.rb因为我实际上只有应用程序和测试文件。到目前为止,我已经将Datamapper用于ORM,将SQLite用于数据库。这是我的第一个Ruby/Sinatra项目,所以欢迎任何和所有建议-我应

随机推荐