推荐 9 个 VUE3 UI 框架

共 3401字，需浏览 7分钟

· 2021-09-08

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

Ant Design Vue

官方网站：https://2x.antdv.com/components/overview/

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

官方网站：https://next-material.balmjs.com/#/

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

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

Wave UI

官方网站：https://antoniandre.github.io/wave-ui/

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

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

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

Vuestic

官方网站：https://vuestic.dev/

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

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

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

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

Element+

官方网站：https://element-plus.org/#/zh-CN

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

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

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

Ionic

官方网站：https://ionicframework.com/docs/vue/overview

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

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

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

Naive UI

官方网站：https://www.naiveui.com/zh-CN/os-theme

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

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

Quasar

官方网站：https://next.quasar.dev/

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

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

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

PrimeVUE

官方网站：https://primefaces.org/primevue/showcase/#/setup

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

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

总结

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

原文链接：https://my.oschina.net/lav/blog/5179117

逆锋起笔是一个专注于程序员圈子的技术平台，你可以收获最新技术动态、最新内测资格、BAT等大厂大佬的经验、增长自身、学习资料、职业路线、赚钱思维，微信搜索逆锋起笔关注！

Vue 实现数组四级联动

Vue 项目打包部署总结

Vue3.0 七大亮点是什么？？

一名 Vue 程序员总结的 React 基础

Vue 实战中的一些小魔法

图片

表情

真心建议大家搞个香港身份，再不冲就晚了

香港一直有“互联网荒漠”之称，疫情这三年，香港开始大力扶持互联网科技工程 /IT产业，公布了《香港智慧城市蓝图》。目前规划已经覆盖到交通、医疗、经济、教育、环境等多个方面。目前在智能制造，5G网络、智慧城市等领域人才，通过香港优才计划入境都极具优势。什么是香港优才计划优才计划，全称优秀人才入境计划

公子龙

推荐 | 文本分析库cntext2.x使用手册

Tips: 公众号推送后内容只能更改一次，且只能改20字符。如果内容出问题，或者想更新内容，只能重复推送。为了更好的阅读体验，建议阅读本文博客版，链接地址https://textdata.cn/blog/2024-04-27-cntext2x-usage-tutorial/cntext是大邓

大邓和他的Python

豆瓣9分线代教材免费了！斯坦福伯克利都在用，新版PDF直接下载

西风发自凹非寺量子位 | 公众号 QbitAI豆瓣评分9.2、斯坦福都在用的线性代数教材，全新第四版免费来袭！没错，就是那本被认为“直击线性代数理论核心”的Linear Algebra Done Right。此书之前已发售三版，风靡30多个国家的200多所高校，这其中就包括斯坦福、UCB等顶尖

机器学习算法与Python实战

顶级 Javaer 都在用的 20 个类库，真香！

点击关注公众号，Java 干货及时推送↓推荐阅读：投了 100 多份简历后…优秀且经验丰富的Java开发人员的特征之一是对API的广泛了解，包括JDK和第三方库。我花了很多时间来学习API，尤其是在阅读了Effective Java 3rd Edition之后，Joshua Bloch建

Java技术栈

【温馨提示】由于公众号更改了推送规则，不再按照时间顺序排列，如果不想错过测试开发技术精心准备的的干货文章，请将测试开发技术设为“星标☆”，看完文章在文尾处点亮“在看”！大家好，我是狂师！在大数据时代，信息的获取与分析变得尤为重要。对于开发者、数据分析师乃至非技术人员来说，能够高效地采集网络数据并进行

测试开发技术

【第128期】提升编程效率VSCode变量命名插件推荐

概述在编程的世界里，一个好的变量名不仅能够提升代码的可读性，还能反映出程序员的专业水平。Visual Studio Code（VSCode）作为一个广受欢迎的代码编辑器，拥有丰富的插件生态系统，其中不乏能够帮助我们高效命名变量的工具。今天，我们就来介绍几款VSCode上能够提升变量命名效率的插件

前端微服务

【第127期】推荐常用的国内外AI大模型

概述多个国内外的AI大模型及其特点。以下是一些被提及的AI大模型和平台：全球大模型：ChatGPT：由OpenAI开发，支持多种语言，包括中文。Claude：由Anthropic开发，擅长深层次语言模式和复杂推理。Gemini：由Google Research开发，擅长自然语言理解和生成。Mis

前端微服务

前端框架新势力大盘点

点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群近年来，前端领域快速发展，新的框架不断涌现，为开发者提供了更多选择和解决方案。尽管 React、Vue、Angular、Next.js、Preact 等老牌框架依然稳坐市场主流，但新势力前端框架的崛起也为特定场景带来了更佳的适配和优

前端Q

周鸿祎：雷军说小米SU7不适合我，等小米做SUV时再推荐

360公司创始人周鸿祎在互联网30周年座谈会上向雷军提出想要体验小米SU7的请求，但被雷军婉拒。雷军给出的理由是，他仔细研究了周鸿祎的选车标准，发现周鸿祎不会开车，只坐后座，而小米SU7是为追求驾驶乐趣的用户设计的，因此不适合周鸿祎。雷军还表示，等到小米推出SUV版本时，再推荐给周鸿祎。目前已知明确

Python涨薪研究所

6 个火爆 GitHub 的后台管理模板，快来收藏！

将Python客栈设为“星标⭐”第一时间收到最新资讯今天来给大家介绍6个火爆 G 站的管理后台模板，有了它们，对于前端不是很熟悉的小伙伴来说，再也不用烦恼了，而且有一说一，即使是前端大牛，要想从零开发一套完整的管理模板，也不是一件容易的事情。1. vue-element-admin该项目是基于 Vu

Python客栈