【Vue3 页面美化】常用组件库推荐

news2024/10/7 12:24:44

Vue 作为一款深受广大群众喜欢的前端框架，拥有众多优秀的开源 UI 组件库，这里整理了一下供大家参考。

这几套框架主要用于后台管理系统和移动端的制作，方便开发者快速开发。

一、PC 端 UI 库

1.1 Element Plus

官网地址：https://element-plus.org/zh-CN/

Github: https://github.com/element-plus/element-plus

Element-plus 基于 Vue 3，面向设计师和开发者的组件库。

1.2 Ant-design-vue

官网地址：https://antdv.com/

Github: https://github.com/vueComponent/ant-design-vue

ant-design-vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
在这里插入图片描述

1.3 Vuetify

官网地址：https://vuetifyjs.com/

Github: https://github.com/vuetifyjs/vuetify

Vuetify 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库。不需要任何设计技能 — 创建叹为观止的应用程序所需的一切都触手可及。一套完整的开发对接文档，易上手。

Vuetify 是世界上最流行的 Vue.js 框架，用于构建功能丰富、快速的应用程序。

在这里插入图片描述

1.4 Vant 4.0

官网地址：https://vant-ui.github.io/vant/

Github: https://github.com/vant-ui/vant

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

在这里插入图片描述

1.5 Naive UI

官网地址：https://www.naiveui.com/

Github（11k）:https://github.com/tusen-ai/naive-ui

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

在这里插入图片描述

1.5 arco.design

字节跳动企业级产品设计系统，支持React和Vue双版本

官方地址：https://arco.design/

ArcoDesign 基于字节跳动公司内部的 Byte Design 升级而来，在打磨了近 3 年之后，通过字节内部大量业务沉淀和验证，在由掘金举办的《稀土开发者大会2021》上开源了，这不仅仅是一款 UI 组件库，而是一个能力全面的企业级产品设计系统。

ArcoDesign 主要解决在打造中后台应用时，让产品设计和开发无缝连接，提高质量和效率。目前 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现，主要由 UED 设计和开发同学共同构建及维护。

在这里插入图片描述

1.6 TDesign

腾讯业务团队在服务业务过程中沉淀的一套企业级设计体系

官方地址：https://tdesign.tencent.com/

开发文档：https://tdesign.tencent.com/vue-next/overview

在这里插入图片描述

1.7 DevUI

华为基于 Vue3 和 DevUI 设计的 UI 组件

官方地址：https://vue-devui.github.io/

在这里插入图片描述

1.8 vuestic-ui

Vue 3 的免费和开源 UI 库 ,UI非常好看，并且有可用后台管理界面。

官方地址：https://vuestic.dev/

Vuestic UI 是一套由 Epicmax 团队开发的一套基于 Vue.js 的 web 开发组件库，最近更新发布了 Vue3 版本，希望用 Vue .js 的专业知识以最佳方式构建一个可用性强且全面的开源工具。Vuestic UI 在发布后不久，便成为使用 Vue 构建的最受欢迎的组件库之一。

在这里插入图片描述