推荐3款Vue3 移动端UI组件库 #干货分享

今天给小伙伴们推荐几个比较热门,也是本人常用的vue3 移动端UI组件库,希望对大家有所帮助及参考学习! 感谢小伙伴们的阅读、关注、点赞、转发。

1、vant

Vant 是一个轻量、可定制的移动端组件库，目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

目前vant4是本人最常用也是使用开发平台最多的一款UI组件库了。微信小程序、uniapp中的H5和APP开发都在使用这款组件库。个人感觉非常简单、容易新人上手。

特性：

• 性能极佳，组件平均体积小于 1KB（min+gzip）
• 70+ 个高质量组件，覆盖移动端主流场景
• 零外部依赖，不依赖三方 npm 包
• 使用 TypeScript 编写，提供完整的类型定义
• 单元测试覆盖率超过 90%，提供稳定性保障
• 提供丰富的中英文文档和组件示例
• 提供 Sketch 和 Axure 设计资源
• 支持 Vue 2、Vue 3 和微信小程序
• 支持主题定制，内置 700+ 个主题变量
• 支持按需引入和 Tree Shaking
• 支持无障碍访问（持续改进中）
• 支持深色模式
• 支持 Nuxt 3
• 支持服务器端渲染
• 支持国际化，内置 30+ 种语言包

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

2、NutUi

NutUI-Vue 组件库，适用于 Vue 技术栈的 H5 应用，开箱即用，帮助研发快速开发用户界面，提升开发效率，改善开发体验。

这款UI组件库比较适合我们平时开发微商城或电商类项目，毕竟JD是做电商的，那么JD前端团队开发出来的UI组件库也必定会优先考虑自身产品的属性。

特性：

• 80+ 高质量组件，覆盖移动端主流场景
• 基于京东 APP 10.0 视觉规范
• 支持按需引用
• 详尽的文档和示例
• 支持 TypeScript
• 支持 webstorm，vscode 组件属性高亮
• 支持动态定制主题
• 支持暗黑模式
• 支持国际化
• 单元测试覆盖率超过 80%，保障稳定性
• 提供 Sketch 设计资源

https://nutui.jd.com/

3、TDesign

TDesign 适配移动端的组件库，适合在 vue 3 技术栈项目中使用。

一款腾讯前端团队开发的UI组件库，如开发微信小程序可以使用此款UI组件库。

从官网的介绍及设计上来讲，这款UI组件库还是很不错的。但个人认为这个组件库还比较新，可能新手不太容易上手。毕竟如果是出现问题组件类的BUG，找度娘都不太好找。

https://tdesign.tencent.com/mobile-vue/overview