Vant&NutUI–完美支持Vue3.0的移动端组件库

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

介绍

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


目前完美支持Vue3.0的移动端组件库——Vant&NutUI

Vant简介

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

  • 特点

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

目前完美支持Vue3.0的移动端组件库——Vant&NutUI

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

  • 真机组件欣赏(来自于真机截图)

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

目前完美支持Vue3.0的移动端组件库——Vant&NutUI

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

目前完美支持Vue3.0的移动端组件库——Vant&NutUI
目前完美支持Vue3.0的移动端组件库——Vant&NutUI

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

目前完美支持Vue3.0的移动端组件库——Vant&NutUI
目前完美支持Vue3.0的移动端组件库——Vant&NutUI

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

NutUI

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

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

目前完美支持Vue3.0的移动端组件库——Vant&NutUI
目前完美支持Vue3.0的移动端组件库——Vant&NutUI

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

目前完美支持Vue3.0的移动端组件库——Vant&NutUI
目前完美支持Vue3.0的移动端组件库——Vant&NutUI
目前完美支持Vue3.0的移动端组件库——Vant&NutUI

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

目前完美支持Vue3.0的移动端组件库——Vant&NutUI

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

目前完美支持Vue3.0的移动端组件库——Vant&NutUI
目前完美支持Vue3.0的移动端组件库——Vant&NutUI
目前完美支持Vue3.0的移动端组件库——Vant&NutUI

总结

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

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/25658.html

发表评论

登录后才能评论