探索【日新月异的Vue3组件库以及后台模板】

Vue3官方文档地址

vue3官方文档
https://cn.vuejs.org/
Vue 2迁移Vue 3指南
https://v3-migration.vuejs.org/zh/

一、pc端UI库

（注：排名不分先后，预览后台模板可快速了解组件库的总体情况）

1.ElementUI Plus

        用过Vue2的小伙伴应该对ElementUI应该不陌生，Element在vue2的占有率相当大，ElementUI Plus 是 ElementUI的vue3版本。

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

第三方后台模板：

vue-pure-admin 

        地址：https://pure-admin-doc.vercel.app/

        预览地址：https://vue-pure-admin.vercel.app/

Geeker-Admin

        地址：https://github.com/HalseySpicy/Geeker-Admin
        预览地址：https://admin.spicyboy.cn

---

2.Ant Design of Vue

        Ant Design 是 React 阵营的主流UI库，由阿里团队开发，Ant Design of Vue 是 基于vue移植的Ant Design项目，如果需要使用其他阿里系的组件库，推荐使用此UI库，同一生态，可以减少一部分依赖兼容性问题。

地址：https://www.antdv.com/docs/vue/introduce-cn

第三方后台模板

Vben Admin

        地址：https://doc.vvbin.cn/

        预览地址：https://vben.vvbin.cn/

vue3-antd-admin

        地址：https://github.com/buqiyuan/vue3-antd-admin

        预览地址：http://buqiyuan.gitee.io/vue3-antd-admin/

---

3.TDesign

        腾讯公司开发的UI组件库，体系强大，有桌面端，移动端，小程序端三中解决方案，值得一提的是由于是腾讯公司开发的，在微信小程序中使用也是相当有好的，如果对小程序美观需求大，不妨可以试下此组件库。后台模板框架也是相当丰富，基本满足了管理后台的基础需求。提供UI原型设计。除了这三中解决方案，还在开发京东Taro框架的组件库（Taro - 京东开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。）以及老牌Flutter来解决安卓和ios的app，目前还在开发中没有正式上线，未来将是很庞大的ui体系，发展前景良好，可能会占据C位。

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

后台模板地址：https://tdesign.tencent.com/starter/

后台模板预览地址：https://tdesign.tencent.com/starter/vue-next

---

4.arco.design

        “字节跳动企业级产品设计系统，智能设计体系，连接轻盈体验”

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

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

地址：https://arco.design/

后台模板预览地址：http://vue-pro.arco.design/login

---

5.Naive UI

        “一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，快有点意思”

        图森公司开发，曾在2021年vue作者被尤雨溪在微博上推荐过，Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript 技栈开发的前端 UI 组件库，作者来自图森未来公司，一开始内部维护并使用两年，如今在 Github 社区开源。

地址：https://www.naiveui.com/zh-CN/os-theme

第三方后台模板：

naive-ui-admin

        地址：https://naive-ui-admin-docs.vercel.app/

        预览地址：https://naive-ui-admin.vercel.app/

---

6.View UI Plus

        基于 Vue.js 3 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。（后台模板和部分功能是收费的）

地址：https://www.iviewui.com/

后台模板预览地址：https://adminplus.iviewui.com/login

---

7.Vue DevUI

        华为公司开发，DevUI是 Angular 阵营的主流模板，Vue DevUI 是 DevUI 的vue移植版 ，目前只是移植了部分组件，看着比较简介，没有找到后台模板，还需观望。

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

二、移动端UI库

（注：排名不分先后）

1.Vant

        Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。组件相当丰富，特别适合电商开发，有许多预制的电商组件。性能极佳，组件平均体积小于 1KB（min+gzip），80+ 个高质量组件，覆盖移动端主流场景，零外部依赖，不依赖三方 npm 包，支持主题定制，内置 700+ 个主题变量，支持深色模式，支持国际化，内置 30+ 种语言包

地址：https://vant-contrib.gitee.io/vant/#/zh-CN/

---

2.NutUI

        NutUI 是京东样式风格的 Vue 移动端组件库，开发和服务于移动 Web 界面的企业级产品。支持京东Taro框架的组件库（Taro - 京东开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用），还有app方案还在开发中。

地址：https://nutui.jd.com

---

3.Varlet

        Material 风格移动端组件库 ，组件很多，也曾被尤雨溪推荐。Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验

地址：https://varlet.gitee.io/varlet-ui/#/zh-CN/home