Vue3 开源UI 框架推荐 （大全）

一 、前言

💥这篇文章主要推荐了支持 Vue3 的开源 UI 框架，包括 web 端和移动端的多个框架，如 Element-Plus、Ant Design Vue 等 web 端框架，以及 Vant、NutUI 等移动端框架，并分别介绍了它们的特性和资源地址。💦

二、vue3资源仓库

  • 仓库资源地址：vue3-resource
  • 预览：在线预览

三、web端

3.1 Element-Plus

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

资源地址
  • 官方文档：
    • 旧版本文档
    • 新版本文档
  • 仓库资源：
    • github地址
    • gitee地址

3.2 Ant Design Vue

Ant Design Vue 是 Ant Design 的 Vue.js 实现，开发和服务于企业级后台产品。

资源地址
  • 官方文档：文档地址
  • 仓库资源：
    • github地址
    • gitee地址
特性
  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 Vue 组件。
  • 共享 Ant Design of React 设计工具体系。

3.3 Quasar

构建高性能的 VueJS 用户界面,开箱即用,支持桌面和移动浏览器（包括 iOS Safari！）。

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址

3.4 Arco-design-vue

字节跳动全面开源的企业级产品设计系统。

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址

3.5 Naive UI

Naive UI 一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，不算太慢,有点意思。

资源地址
  • 官方文档：文档地址
  • 仓库资源：
    • github地址
    • gitee地址

3.6 Element3 

Element3，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址

3.7 BalmUI

BalmUI 是为 Vue.js 3.0 量身订制的模块化且高可定制化的 Material Design UI 库。

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址
特性
  • 提炼自企业级中后台产品的交互效果和视觉风格
  • 开箱即用的高质量 Vue 组件/插件/指令/常用工具库
  • 深入每个细节的主题定制能力
  • 集成完整最新的 Material Icons
  • 所有组件和插件均高可定制化，并且可被独立使用

3.8 Vuestic UI

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

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址

3.9 IDUX UI

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

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址
特性
  • Monorepo 管理模式：cdk, components, pro
  • 全面拥抱 Composition Api，从源码到文档
  • 完全使用 TypeScript 开发，提供完整的类型定义
  • 开箱即用的 Tree Shaking
  • 高覆盖率的单元测试
  • 国际化语言支持
  • 灵活的全局配置
  • 深入细节的主题定制能力

3.10 RelaxPlus

RelaxPlus，一套为开发者学习Vue 3.x 而准备的友好、简洁、轻盈、精致的桌面端组件库

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址

3.11 Viewer Design

Viewer Design是一款基于 Vue3.0 + typescript开发的中后台UI组件库, 组件的高配置性 + 传统的UI组件库的特性 + 更好的交互体验,为用户的使用提供了很大的便利

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址
特性
  • 丰富的组件以及功能，满足大部分中后台产品的业务场景；
  • 每个组件都用于高配置性，例如属性 styles，满足您的各种定制化
  • 所有组件基于 typescript ,CompositionAPI 以及 tsx 开发。是Vuetypescript爱好者绝佳学习对象。如果你希望使用tsx开-发高质量的Vue组件，那么强烈推荐尝试基于 Viewer-Design 的组件来封装
  • 支持组件按需引入，支持图标按需加载，组件库使用了 yarn + lerna 管理模式，可以单独下载并使用某一个组件
  • 为了满足日常的业务需求，从使用的角度提供了更多的指令，方便快捷。例如：复制文本,避免了单独下载插件来实现

3.12 Vexip UI

Vexip UI 提供了一系类开箱即用的组件。 该组件库使用全新的 vue3.0 组合式 Api 编写，开发脚手架为最新的 vite2.0，并且应用 monorepo 的管理思想使得可以为每个组件启动独立的开发服务与建立单独的开发文件，是新一代 vue 组件库项目的一次尝试。

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址
特性
  • 丰富的组件和功能，为网站开发助力，大幅提高效率
  • 开箱即用的高质量 Vue3 组件
  • 符合直觉的 api 设计，易于理解与使用
  • 完全使用组合式 api 编写，拥有优秀的性能与拓展性

3.13 Bin UI Next

Bin-UI-Next 是bin-ui的vue3升级版，目前组件库已经基本完成重构，整体组件依赖vue3

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址
特性
  • 基于 Vue 3.0 Composition API
  • 最新图标基于阿里iconfont ant-design 官方图标精简版
  • 移除了部分冗余代码
  • 部分组件代码进行重构

四、移动端

4.1 Vant

Vant是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

资源地址
  • 官方文档：vue3版本文档
  • 仓库资源：
    • github地址
    • gitee地址
特性
  • 提供 60 多个高质量组件，覆盖移动端各类场景
  • 性能极佳，组件平均体积不到 1kb（min+gzip）
  • 单元测试覆盖率 90%+，提供稳定性保障
  • 完善的中英文文档和示例
  • 支持 Vue 2 & Vue 3
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持 TypeScript
  • 支持 SSR

4.2 NutUI 3.0

NutUI 是京东风格的 Vue 移动端组件库，开发和服务于移动Web界面的企业级产品。

资源地址
  • 官方文档：文档地址
  • 仓库资源：
    • github地址
    • gitee地址
特性
  • 70+ 高质量组件（3.0 持续开发中）
  • 基于京东APP 10.0 视觉规范
  • 支持按需引用
  • 详尽的文档和示例
  • 支持 TypeScript
  • 支持服务端渲染（测试阶段）
  • 支持定制主题
  • 单元测试覆盖（3.0 开发中）

4.3 Varlet

Varlet是一个基于Vue3开发的Material风格移动端组件库，全面拥抱Vue3生态，由社区的小伙伴开发和维护。

资源地址
  • 官方文档：文档地址
  • 仓库资源：
    • github地址
    • gitee地址
特性
  • 提供40多个高质量通用组件
  • 组件十分轻量
  • 由国人开发，完善的中英文文档和后勤保障
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持webstorm，vscode组件属性高亮
  • 支持SSR
  • 支持Typescript

4.4 Ionic Framework

Ionic Framework 是一个开源 UI 工具包，用于使用 Web 技术（HTML、CSS 和 JavaScript）构建高性能、高质量的移动和桌面应用程序，并集成了Angular、React和Vue等流行框架。

资源地址
  • 官方文档：vue文档地址
  • 仓库资源：github地址

4.5 WaveUI

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

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址
特性
  • Fully responsive
  • Accessibility compliant
  • Very flexible
  • Easy to use
  • Obviously awesome!
  • Supporting Vue 3
  • No dependency
  • Lightweight

4.6 Vuetify

Vuetify 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库。 不需要任何设计技能 — 创建叹为观止的应用程序所需的一切都触手可及。

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址

4.8 Mand Mobile Next

Mand Mobile Next面向金融场景，基于 Vue 3.0 移动端组件库

资源地址
  • 官方文档：文档地址
  • 仓库资源：github地址

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

视觉语言动作模型VLA的持续升级：从π0之参考基线Octo到OpenVLA、TinyVLA、DeeR-VLA、3D-VLA

视觉语言动作模型VLA的持续升级：从π0之参考基线Octo到OpenVLA、TinyVLA、DeeR-VLA、3D-VLA

第一部分 VLA模型π0之参考基线Octo 1.1 Octo的提出背景与其整体架构 1.1.1 Octo的提出背景与相关工作 许多研究使用从机器人收集的大量轨迹数据集来训练策略 从早期使用自主数据收集来扩展策略训练的工作[71,48,41,19-Robonet,27,30]到最近探索将现代基于transformer的策略…
阅读更多...
k8s--pod创建、销毁流程

k8s--pod创建、销毁流程

文章目录 一、pod创建流程二、pod销毁流程 一、pod创建流程 1、用户通过kubectl或其他api客户端提交pod spec给apiserver,然后会进行认证、鉴权、变更、校验等一系列过程2、apiserver将pod对象的相关信息最终存入etcd中,待写入操作执行完成,apiserver会返回确认信息给客户端3、…
阅读更多...
相同的二叉树

相同的二叉树

给你两棵二叉树的根节点 p 和 q ，编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同，并且节点具有相同的值，则认为它们是相同的。 示例 1： 输入：p [1,2,3], q [1,2,3] 输出：true示例 2&…
阅读更多...
算法妙妙屋-------1.递归的深邃回响：全排列的奇妙组合

算法妙妙屋-------1.递归的深邃回响：全排列的奇妙组合

全排列的简要总结 全排列（Permutation）是数学中一个经典的问题，指的是从一组元素中，将所有元素按任意顺序排列形成的所有可能序列。 特点 输入条件： 给定一组互异的元素（通常为数组或字符串）。…
阅读更多...
【Rust】unsafe rust入门

【Rust】unsafe rust入门

这篇文章简单介绍下unsafe rust的几个要点 1. 解引用裸指针 裸指针其实就是C或者说C的指针，与C的指针不同的是，Rust的裸指针还是要分为可变和不可变，*const T 和 *mut T： 基于引用创建裸指针 let mut num 5;let r1 &num …
阅读更多...
什么是人工智能大模型？

什么是人工智能大模型？

成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于人工智能大模型的相关内容！ …
阅读更多...
基于深度学习和卷积神经网络的乳腺癌影像自动化诊断系统(PyQt5界面+数据集+训练代码)

基于深度学习和卷积神经网络的乳腺癌影像自动化诊断系统(PyQt5界面+数据集+训练代码)

乳腺癌是全球女性中最常见的恶性肿瘤之一，早期准确诊断对于提高生存率具有至关重要的意义。传统的乳腺癌诊断方法依赖于放射科医生的经验，然而，由于影像分析的复杂性和人类判断的局限性，准确率和一致性仍存在挑战。近年来&#xf…
阅读更多...
【IMF靶场渗透】

【IMF靶场渗透】

文章目录 一、基础信息 二、信息收集 三、flag1 四、flag2 五、flag3 六、flag4 七、flag5 八、flag6 一、基础信息 Kali IP：192.168.20.146 靶机IP：192.168.20.147 二、信息收集 Nmap -sP 192.168.20.0/24 Arp-scan -l nmap -sS -sV -p- -…
阅读更多...
MySQL 复合查询

MySQL 复合查询

实际开发中往往数据来自不同的表，所以需要多表查询。本节我们用一个简单的公司管理系统，有三张表EMP,DEPT,SALGRADE 来演示如何进行多表查询。表结构的代码以及插入的数据如下： DROP database IF EXISTS scott; CREATE database IF NOT EXIST…
阅读更多...
理解Java集合的基本用法—Collection：List、Set 和 Queue，Map

理解Java集合的基本用法—Collection：List、Set 和 Queue，Map

本博文部分参考 博客 ，强烈推荐这篇博客，写得超级全面！！！ 图片来源 Java 集合框架 主要包括两种类型的容器，一种是集合（Collection），存储一个元素集合（单列…
阅读更多...
【看海的算法日记✨优选篇✨】第三回：二分之妙，寻径中道

【看海的算法日记✨优选篇✨】第三回：二分之妙，寻径中道

🎬 个人主页：谁在夜里看海. 📖 个人专栏：《C系列》《Linux系列》《算法系列》 ⛰️ 一念既出，万山无阻 目录 📖一、算法思想 细节问题 📚左右临界 📚中点选择 📚…
阅读更多...
[CTF/网络安全] 攻防世界 upload1 解题详析

[CTF/网络安全] 攻防世界 upload1 解题详析

[CTF/网络安全] 攻防世界 upload1 解题详析 考察文件上传&#xff0c;具体原理及姿势不再赘述。 姿势 在txt中写入一句话木马<?php eval($_POST[qiu]);?> 回显如下&#xff1a; 查看源代码&#xff1a; Array.prototype.contains function (obj) { var i this.…
阅读更多...
网络安全运行与维护 加固练习题

网络安全运行与维护 加固练习题

1. 提交用户密码的最小长度要求。 输入代码： cat /etc/pam.d/common-password 提交答案： flag{20} 2.提交iptables配置以允许10.0.0.0/24网段访问22端口的命令。 输入代码： iptables -A INPUT -p tcp -s 10.0.0.0/24 --dport 22 -j ACCEPT 提交答案： flag{iptables -A I…
阅读更多...
PID模糊控制算法（附MATLAB仿真程序）

PID模糊控制算法（附MATLAB仿真程序）

一、基本原理 PID模糊控制算法是一种将传统PID控制与模糊逻辑相结合的控制策略。它利用模糊逻辑处理不确定性和非线性问题的能力&#xff0c;以提高控制系统的性能。以下是PID模糊控制算法的基本原理&#xff1a; 1.1. **误差和误差变化率的计算**&#xff1a; - 首先&…
阅读更多...
【leetcode100】螺旋矩阵

【leetcode100】螺旋矩阵

1、题目描述 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5] 2、初始思路 2.1 思路 定义上下左右…
阅读更多...
2024.11.29（单链表）

2024.11.29（单链表）

思维导图 声明文件 #ifndef __LINKLIST_H__ #define __LINKLIST_H__#include <myhead.h>typedef char datatype; //数据元素类型 //定义节点类型 typedef struct Node {union{int len; //头节点数据域datatype data; //普通节点数据域};struct Node *next; //指针域…
阅读更多...
第六届金盾信安杯-SSRF

第六届金盾信安杯-SSRF

操作内容&#xff1a; 进入环境 可以查询网站信息 查询环境url https://114.55.67.167:52263/flag.php 返回 flag 就在这 https://114.55.67.167:52263/flag.php 把这个转换成短连接&#xff0c;然后再提交 得出 flag
阅读更多...
【Linux】进程控制，手搓简洁版shell

【Linux】进程控制，手搓简洁版shell

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;Linux 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 1、进程创建2、进程终止3、进程等待4、进程程序替换5、手写简洁版shell 1、进程创建 fork函数&#xff1a;从已经存在的进程中创…
阅读更多...
逆向攻防世界CTF系列42-reverse_re3

逆向攻防世界CTF系列42-reverse_re3

逆向攻防世界CTF系列42-reverse_re3 参考&#xff1a;CTF-reverse-reverse_re3&#xff08;全网最详细wp&#xff0c;超4000字有效解析&#xff09;_ctfreverse题目-CSDN博客 64位无壳 _int64 __fastcall main(__int64 a1, char **a2, char **a3) {int v4; // [rsp4h] [rbp-…
阅读更多...
安装 RabbitMQ 服务

安装 RabbitMQ 服务

安装 RabbitMQ 服务 一. RabbitMQ 需要依赖 Erlang/OTP 环境 (1) 先去 RabbitMQ 官网&#xff0c;查看 RabbitMQ 需要的 Erlang 支持&#xff1a;https://www.rabbitmq.com/ 进入官网&#xff0c;在 Docs -> Install and Upgrade -> Erlang Version Requirements (2) …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023