介绍

Vue3.0已经发布有一段时间了，目前不少PC端的组件都已经更新迭代支持Vue3了，像Element UI、Antd Design Vue以及前段时间的新面孔Naive-ui 都是PC端组件库中的佼佼者。相较于PC端，移动端也已经有完美支持Vue3.0的UI组件库了，今天介绍的是两个比较不错的移动端组件库Vant（有赞团队）&NutUI（京东）！

Vant简介

Vant 是有赞前端团队开发并开源的移动端组件库，开源至今4年时间，目前已经成为移动端组件库生态里面的主流选择，大部分开发过移动端的朋友可能都了解或者用过，它提供Vue2、Vue3以及小程序版本的组件库，社区维护了其React版本。

• 特点

支持非常丰富的常用组件（60+）、性能非常优秀，压缩后体积很小、持续更新，生态稳定、具备非常完善的文档以及代码示例可供参考、支持Vue的2.0和3.0版本、以及主题定制、国际化、支持Typescript、服务器端渲染（SSR）等。同时官方提供非常丰富的设计资源可供设计师、产品经理使用

文档地址：https://youzan.github.io/vant/v3/#/zh-CN

• 真机组件欣赏（来自于真机截图）

基础组件：包括基础组件、Button 按钮、Cell 单元格、ConfigProvider 全局配置、Icon 图标、Image 图片、Layout 布局、Popup 弹出层、Style 内置样式、Toast 提示

表单组件：Calendar 日历、Cascader 级联选择、Checkbox 复选框、DatetimePicker 时间选择、Field 输入框、Form 表单、NumberKeyboard 数字键盘、PasswordInput 密码输入框、Picker 选择器、Radio 单选框、Rate 评分、Search 搜索、Slider 滑块、Stepper 步进器、Switch 开关、Uploader 文件上传

反馈组件：ActionSheet 动作面板、Dialog 弹出框、DropdownMenu 下拉菜单、Loading 加载、Notify 消息通知、Overlay 遮罩层、PullRefresh 下拉刷新、ShareSheet 分享面板、SwipeCell 滑动单元格

展示组件：Badge 徽标、Circle 环形进度条、Collapse 折叠面板、CountDown 倒计时、Divider 分割线、Empty 空状态、ImagePreview 图片预览、Lazyload 懒加载、List 列表、NoticeBar 通知栏、Popover 气泡弹出框、Progress 进度条、Skeleton 骨架屏、Steps 步骤条、Sticky 粘性布局、Swipe 轮播、Tag 标签

导航组件：ActionBar 动作栏、Grid 宫格、IndexBar 索引栏、NavBar 导航栏、Pagination 分页、Sidebar 侧边导航、Tab 标签页、Tabbar 标签栏、TreeSelect 分类选择

还提供了部分业务组件，就不详细截图了，可以看出组件丰富，颜值颇高

NutUI

NutUI是京东风格的移动端企业级UI组件库、提供丰富的组件、vue3 vite2.x typescript支持、服务端渲染、主题定制等等特性，颜值也是杠杠滴，下面就直接欣赏NutUI的丰富组件吧,刚好能和Vant有一个视觉上的对比，以下按照官方分类进行截图：

布局组件：Button 按钮组件、Collapse 折叠面板、Layout 布局

操作反馈：BackTop 返回顶部、ActionSheet 动作面板、Toast 提示、Notify 消息通知、Picker 选择器、DatePicker 选择器

基础组件：Cell 单元格组件、Uploader 上传组件、Icon 图标组件、Price 价格组件、Checkbox 复选按钮、Swiper 轮播、Avatar 头像、Popup 弹出层、Dialog 对话框、Radio 单选按钮、OverLay 遮罩层、InfiniteLoading 滚动加载、Range 区间选择器、Drag 拖拽、Video 视频播放器、Steps 步骤条

导航组件：Navbar 导航组件、Tabbar 标签栏组件

数据录入：InputNumber 数字输入框、Input 输入框、Switch 开关组件、Rate 评分、Calendar 日历、ShortPassword 短密码、TextArea 文本域

总结

Vant和NutUI都是非常优秀的基于Vue的移动端UI组件库，从刚刚截图的结果来看，二者有很多相似的地方，对于大多数场景而言，两者的组件都够用了，至于如何选择，可以根据自身对组件的理解情况来进行针对性选择。