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地址