9 个值得推荐的 VUE3 UI 框架

news2024/10/6 12:34:20

本文推荐几个比较流行的 VUE3 UI 框架,同时提供出色的开发人员体验,合理利用,又或者学习借鉴都是不错的选择,排名不分先后。

Ant Design Vue

Ant Design Vue 是一个非常成熟的框架,使用 Ant Design Vue 创建用户界面非常简单,这些组件可以适应各种图标样式、字体和黑色主题。Ant Design Vue 不断改进其 60 多个组件,基本覆盖项目大部份需求,而且使它们变得更好,更易于访问。

Vue3 上的 Ant Design 包更小,感觉更轻,并且支持 SSR(还包括组合 API),Ant Design 拥有成熟的复杂组件,如数据表、统计框、pop 确认、模态和弹出窗口。

Ant Design Vue 在 GitHub 上拥有 15k+ 颗星,每周下载量为 49k,数据已经说明了它的受欢迎程度。

BalmUI

BalmUI 已经发布了他们的 9.0 版本了,该版本支持 Vue3。Balm 基于谷歌的 Material Design,这就是为什么它看起来很熟悉。Balm 附带 Vue 插件和指令,以及从简单到复杂的高度可定制的组件。

BalmUI 发展非常迅速,如果想使用 Material Design 风格,使用复杂的内置指令(如 debouncing 和 UI 波纹)在创建自定义组件时能派上用场,那么它非常适合 Vue3 项目。

Wave UI

WaveUI 在 Vue3 发布后进行了良好的定位,WaveUI 的开发是在 Vue3 仍处于 alpha 阶段时就开始了,其目标是在其 API 稳定后立即支持它,使其成为首批 Vue3 UI 框架之一。

WaveUI 拥有 40 多个漂亮且响应迅速的组件,它们的范围从旋转器到日历,以及介于两者之间的任何东西。WaveUI 还提供实用程序、可定制性和成熟的集成表单验证功能。

WaveUI 提供的组件非常漂亮,动画效果也非常好,它的风格在整个框架中是一致的。企业级响应式 Vue3 应用程序不错的选择。

Vuestic

Vuestic 是 Vue 最漂亮的开源管理面板之一,擅长编写可维护的 Vue 代码,制作灵活的组件和接口。

该团队最近发布了 Vuestic 的 Vue3 版本,包含了流行的 Vuestic Admin UI 和更多的组件。Vuestic 强调它对键盘导航的开箱即用支持,由于它提供的用户体验,这个特性在前端社区很受欢迎。

Vuestic 提供了 50 多个具有独特功能和广泛可配置性的组件,应式设计,这些组件几乎适用于所有屏幕分辨率。Vuestic 在整个框架中提供无缝翻译支持和键盘可访问性。

Vuestic 已经凭借其漂亮的组件目录确立了自己作为最美观的 Vue3 UI 框架之一的地位。他们现在正在加快步伐创建更复杂的组件,例如日期选择器或数据表,它们肯定会像他们当前的产品一样具有创造性。

Element+

Element+ 已经在 Vue2 中声名鹊起,Element+ 为 Vue3 带来了大量不引人注目的组件,创建一个非常复杂的应用程序所需的大部分内容都已经制作完成并可供使用。Element+ 提供成熟的日期和时间选择器、树、时间线和日历组件。

Element+ 甚至提供开发人员在构建 UI 界面时可能需要的最细微的部件,从简单的动画到框架范围的国际化系统,可以与 i18n 配对使用以创建自定义翻译,甚至添加非内置语言。

Element+ 在 GitHub 上拥有 11.1k+ 颗星,正在成为 Github 上最受欢迎的 Vue3 UI 框架之一,它以出色的问题管理、及时更新、可插入组件和通过 SCSS 变量的高定制性达到了开发者的期望。

Ionic

Ionic 是最早提供 Vue3 支持的 UI 框架之一, Ionic 更倾向于移动 UI,团队知道如何迎合和维护一个优秀的 UI 框架。

Ionic Vue 是一个很成熟的框架,有一个令人震惊的社区、大量的 StackOverflow 问题、企业支持和一个拥有核心成员的大型 Slack 频道,这使得可以在需要帮助时轻松获得支持。

Ionic Vue 框架在 Github 上有 45k+ 颗星,已经被很多大公司使用,包括空客(Airbus)和艺电(Electronic Arts),而 Ionic 的团队以擅长维护他们的 UI 框架而闻名,这是现在和未来的一个很好的选择。

Naive UI

Naive UI 在 Twitter 上发布,然后被 Vue 的创建者转发,给这个新生的组件库带来了大量流量。现在,Naive UI 在不到三个月的时间里就在 GitHub 上获得了 5.1k 颗星。

它提供了 70 多个制作精良的组件,这些组件可以无缝地融入几乎任何类型的 Vue3 应用。Naive 的组件性能优异,可定制性极强,并支持 TypeScript,提供了很棒的开发体验。

文档网站易于浏览,并具有完整的自定义输入,可帮助开发人员预览组件在他们自己的主题中的外观。可以使用这些选项来创建自己的带有颜色图案和字体的完整主题。这个定制的主题可以下载并轻松添加到应用程序中以覆盖默认值。

Quasar

Quasar 是一个完整的、以性能为中心的框架,可帮助构建 Vue 用户界面(SPA、PWA、SSR、移动和桌面),除了 Vue、Node 和 Webpack,Quasar 还包含 Cordova、Capacitor 和 Electron,它们可以帮助构建桌面和移动体验,而无需单独学习。

Quasar 框架似乎是基于 Material Design,但是一旦开始,一切都可以很好地定制以适应自己的设计体系。

对 Vue3 支持也很迅速,而且 Quasar 已经发布了几乎所有的 v1 组件、插件和指令。此外,他们还发布了可组合组件,帮助开发人员更深入地了解 Quasar API。

PrimeVUE

PrimeVUE 也算是最早支持 Vue3 的框架之一,它并没有让人失望。PrimeVUE 拥有 80 多个组件,证明自己是此列表中组件范围最广的框架之一。

组件包括带有仪表、滑块、树、图形、拆分按钮、旋钮、图表等的密码表单。PrimeVUE 甚至还集成了一个表单验证库 Vuelidate。附带了预先制作的主题,并提供了一个成熟的可视化编辑器,帮助开发人员定制自己的主题。

总结

随着生态系统的迁移,前端培训从 Vue2 迁移到 Vue3 将变得更加容易,因此,借助 Vue3 提供的 API 和响应性,并结合这些 UI 框架将会让项目开发变得更好、更快、更灵活。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/880380.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

XUbuntu22.04之快速切换Terminal与Chromium窗口(一百八十九)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

前沿分享-通过经皮神经刺激来治疗糖尿病神经性疼痛

经皮神经电刺激(PENS)设备用于对糖尿病周围神经病变引起的慢性、顽固性疼痛进行多次治疗。 放在耳朵上的这种可穿戴设备在几天内持续提供低水平的脉冲电流。 这是一种安全有效的非麻醉性替代治疗慢性疼痛的方法。还有一张设备放在糖足上的照片&#xff0…

Midjourney Prompt 提示词速查表 v5.2

Midjourney 最新的版本更新正不断推出令人兴奋的新功能。这虽然不断扩展了我们的AI绘图工具箱,但有时也会让我们难以掌握所有实际可以使用的功能和参数。 针对此问题, 小编整理了 "Midjourney Prompt 提示词速查表",这是一个非常方便的 Midjo…

Java Vue Uniapp MES生产执行管理系统

本MES系统是一款B/S结构、通用的生产执行管理系统,功能强大! 系统基于多年离散智造行业的业务经验组建,主要目的是为国内离散制造业的中小企业提供一个专业化、通用性、低成本的MES系统解决方案。 联系作者获取

[NDK]从Opengles到Vulkan-基础篇(10)-混合

关于绘制调用的流程 我们可以看到整个流程步骤 1 光栅化2 裁剪测试3 多重采样4 深度测试5 模板测试6 混合7 抖动8 输出帧数据 这一节会涉及到颜色混合。 关于混合 颜色混合的应用:混合可以应用在原有的画面的基础上,添加头像,添加其他遮罩贴图这些内容时使用。 混合其实,…

mysql主从复制搭建(一主一从)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言MySQL复制过程分为三部: 一、准备工作二、配置>主库Master三、配置>从库SlaveSlave_IO_Running: YesSlave_SQL_Running: Yes 四、测试至此&am…

学习笔记整理-BOM-01-基础知识

一、 BOM常用对象 BOM(Browser Object Model,浏览器对象模型)是JS与浏览器窗口交互的接口。一些与浏览器改变尺寸、滚动条滚动相关的特效,都要借助BOM技术。 1. Window对象 window对象是当前JS脚本运行所处的窗口,而这…

最新Burp Suite入门技术

点击星标,即时接收最新推文 本文选自《web安全攻防渗透测试实战指南(第2版)》 五折购买链接:u.jd.com/3ibjeF6 Burp Suite的安装 Burp Suite是一款集成化的渗透测试工具,包含了很多功能,可以帮助我们高效地…

word 应用 打不开 显示一直是正在启动中

word打开来显示一直正在启动中,其他调用word的应用也打不开,网上查了下以后进程关闭spoolsv.exe,就可以正常打开word了

Python学习笔记_基础篇(三)_数据类型之列表

一.基本数据类型 整数:int 字符串:str(注:\t等于一个tab键) 布尔值: bool 列表:list (元素的集合) 列表用[] 元祖:tuple 元祖用() 字典:dict 注&a…

中电金信:技术实践|Flink多线程实现异构集群的动态负载均衡

导语:Apache Flink是一个框架和分布式处理引擎,用于对无界和有界数据流进行有状态计算。本文主要从实际案例入手并结合作者的实践经验,向各位读者分享当应用场景中异构集群无法做到负载均衡时,如何通过Flink的自定义多线程来实现异…

LangChain入门:构建LLM驱动的应用程序的初学者指南

LangChain & DemoGPT 一、介绍 你有没有想过如何使用大型语言模型(LLM)构建强大的应用程序?或者,也许您正在寻找一种简化的方式来开发这些应用程序?那么你来对地方了!本指南将向您介绍LangChain&#x…

Jquery 复选框点击生成标签 源代码

html <!DOCTYPE html> <html><head><meta charset"utf-8"><title>服务资源管理</title><link rel"stylesheet" type"text/css" href"../lib/layui/css/layui.css" /><link rel"st…

从零搭建vue + element-plus 项目

目录 从零搭建vue element-plus 项目 环境安装 安装项目 安装命令如下&#xff1a; 选择配置如下&#xff1a; 安装插件与启动服务 安装element框架 使用element框架 测试element是否安装成功 环境判断 安装插件 使用插件 配置变量 暴漏变量 测试…

菜单和内容滚动的联动原理及代码

之前写代码有个需求&#xff1a;左侧是一个菜单&#xff0c;右边是内容&#xff0c;点击左侧菜单右边内容滚动到对应位置&#xff0c;右边内容滚动到某位置时&#xff0c;左侧菜单也会选中对应的菜单项。UI如下&#xff1a;这是大多网站的移动端都会有的需求。 解决方案一&…

Presto之Union算子的实现

一. 前言 在Presto中&#xff0c;Union的算子包括自动去重的Union操作和不去重的Union All操作。本文主要简述在Presto中Union All算子是如何实现和Union算子中是如何实现数据去重的。 二. Presto之Union的实现 1. 首先在g4中将sql的union关键词与setOperation进行绑定 2. AstB…

css 利用 linear-gradient 实现条纹背景

1. 水平条纹背景 当给背景设置渐变效果时&#xff0c;默认的渐变方向是垂直由上到下的&#xff0c;效果如下&#xff1a; {background: linear-gradient(#aaa, #ddd);} 尝试拉近色标的距离&#xff0c;会发现渐变区域变小了&#xff1a; {background: linear-gradient(#aaa 40…

Spring Security6 最新版配置该怎么写,该如何实现动态权限管理

Spring Security 在最近几个版本中配置的写法都有一些变化&#xff0c;很多常见的方法都废弃了&#xff0c;并且将在未来的 Spring Security7 中移除&#xff0c;因此又补充了一些新的内容&#xff0c;重新发一下&#xff0c;供各位使用 Spring Security 的小伙伴们参考。 接下…

Android控件【Notification】

文章目录 Notification与NotifactionManager创建一个NotificationManager使用Builder构造器来创建Notification对象 NotificationChannel通知重要程度设置&#xff0c;NotificationManager类中 Notification&#xff08;通知&#xff09;常见方法说明注意项目结构主要代码 Noti…

国产DSP,经典之作,C2000,QX320F280049

特性&#xff1a; 1、替代TI 的 TMS320F280049 2、独立双核&#xff0c;主频400MHz 3、单精度浮点运算&#xff0c;三角函数运算 4、Flash 1MB&#xff0c;SRAM 1MB 5、12bit ADC&#xff0c;采样率 3.45MSPS 6、16个高分辨率 ePWM 优点&#xff1a; 1、主频400MHz&#xff0c…