5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐

news/2024/7/10 0:51:19 标签: vue

5 款最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐

本文完整版:《最棒的 Vue 移动端 UI 组件库 - 特别针对国内使用场景推荐》

Vue 移动端 UI 组件库推荐

    • Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序,支付宝小程序
    • Cube UI - 滴滴出行移动端 UI 库,质量可靠,标准规范,扩展性强
    • VUX - 移动端 UI 组件库,针对微信强势优化
    • NutUI 3.0 - 京东移动端 UI 库,面向电商业务场景
    • Vuetify 3 - 老牌 Vue UI ,基于谷歌的 Material Design 样式开发
    • Vue UI 组件库与卡拉云

在 Vue 3 正式版发布一段时间后,各大组件库、框架纷纷对 Vue 3 做了支持和优化,特别是 Vue 移动端组件库,有了跨越式的升级。几家头部大厂也全面拥抱 Vue 3 ,陆续发布了支持 Vue 3 的移动端 UI 组件库,非常值得安利一波。本文筛选了国内常用的 Vue 移动端 UI 组件库,选出了 5 款来自国内互联网一线大厂或是商业化较好的企业 / 个人长期维护的免费移动端 UI 库分享给大家。

  • Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序,支付宝小程序
  • Cube UI - 滴滴出行移动端 UI 库,质量可靠,标准规范,扩展性强
  • VUX - 移动端 UI 组件库,针对微信强势优化
  • NUTUI 3.0 - 京东移动端 UI 库,面向电商业务场景,支持 Vue3
  • Vuetify 3 - 老牌 Vue UI ,基于谷歌的 Material Design 样式开发,支持 Vue3

Vant 3 - 有赞移动 UI 组件库,支持 Vue 3 微信小程序,支付宝小程序

Vant

  • Github:https://github.com/youzan/vant

首先推荐有赞团队开源的 Vant 3 移动端 UI 组件库,不仅已全面支持 Vue 3 而且还支持微信小程序和支付宝小程序。可以说移动端 UI 组件库王者。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

Vant 3 的性能极佳,组件平均尺寸小于 1KB (min+gzip),内置 65 + 个高质量组件,覆盖了主流使用场景中的多数需求。有 700+ 个主题变量,引入了 Tree-Shaking 可按需引入组件,减小打包体积。

扩展阅读:《5 款最棒的 Vue 倒计时组件库测评推荐》

Cube UI - 滴滴出行移动端 UI 库,质量可靠,标准规范,扩展性强

cube-ui

  • Github:https://github.com/didi/cube-ui

滴滴团队开源的 Cube UI 移动端 Vue UI 组件库,轻巧趁手。

Cube UI 质量可靠,由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。体验极致,以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。

Cube UI标准规范,遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。扩展性强,支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。

扩展阅读:《顶级好用的 5 款 Vue table 表格组件测评与推荐》

VUX - 移动端 UI 组件库,针对微信强势优化

vux

  • Github:https://github.com/airyland/vux

VUX 是一款低调的移动端 Vue UI 组件库,纯靠作者个人兴趣支持,已经维护了5、6年了。主要服务于移动端,对微信友好支持。支持 vux-loader 保证了组件按需使用,不用担心打包体积过大。VUX 并不完全依赖于 WeUI (微信的设计 UI 库),VUX 在 WeUI 的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近 WeUI 的设计规范。

扩展阅读:《Element Plus 和 Ant Design Vue 对比测评,哪个更好?》

NutUI 3.0 - 京东移动端 UI 库,面向电商业务场景

NutUI

  • Github:https://github.com/jdf2e/nutui

NutUI 3.0 是京东发布的 Vue 3 移动端 UI 组件库。对移动端友好,特别针对移动端电商业务场景优化测试。70+ 高质量 UI 组件,基于京东 APP 10.0 对视觉规范开发,支持按需引用,支持 TypeScript,支持主题定制。可以使用 Vue 语言来编写在 H5、小程序平台上的应用,帮助我们提升开发效率,改善开发体验。

扩展阅读:《最好用的 7 款 Vue 富文本编辑器》

Vuetify 3 - 老牌 Vue UI ,基于谷歌的 Material Design 样式开发

Vuetify

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

Vuetify 老牌 Vue UI 组件库,它提供了丰富的常用组件(有超过 100 个组件),适用于多数场景下的使用情况。Vuetify 基于谷歌的 Material Design 样式开发,无需写一行 CSS 就能生成相当整洁清爽的界面功能。Vuetify 支持 PC 端和移动端,对移动端有特别棒的优化,响应式,配置简单,带有响应式网络系统,支持事件处理,支持多种浏览器,甚至连 IE 11 也支持。Vuetify 已经发布支持 Vue 3 的版本,如果正在考虑未来的迁移问题,可放心使用。

扩展阅读:《7 种最棒的 Vue Loading 加载动画组件测评与推荐》

Vue UI 组件库与卡拉云

本文介绍了 5 款 Vue 移动端 UI 组件库,虽然这些组件库可以避免我们重复造轮子,但即便如此,前端调试有时也非常令人抓狂。如果不想处理前端问题,推荐使用卡拉云,卡拉云内置各类组件,无需懂任何前端,仅需拖拽即可快速生成。

卡拉云

这是用卡拉云搭建的数据库 CURD 后台管理系统,只需拖拽组件,即可在10分钟内完成搭建。查看更多模版

卡拉云是新一代低代码开发平台,与前端框架 Vue、React等相比,卡拉云的优势在于不用首先搭建开发环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入包括 MySQL 在内的常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。立即免费试用卡拉云。

扩展阅读:

  • Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
  • 最好的 6 个免费天气 API 接口对比测评
  • 12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐
  • 最棒的 7 个 Laravel admin 后台管理系统推荐
  • Retool 是什么,怎么样? —— Retool 低代码工具测评
  • 最好用的 5 个 Vue select 单选多选下拉组件
  • 最好用的 7 款 Vue admin 后台管理框架测评

http://www.niftyadmin.cn/n/1281365.html

相关文章

Vue + Node.js 搭建「文件上传」管理后台

本文完整版《Vue Node.js 搭建「文件上传」管理后台》 目录Vue Node.js「上传文件」前后端项目结构✦ 前端部分 - 上传文件 Vue Axios Multipart配置 Vue 环境导入 Bootstrap 到项目中初始化 Axios HTTP 客户端创建「上传文件」功能创建一个 Vue 多文件上传组件在 App.vue …

最好用的 6 款 MongoDB GUI 管理工具横向测评 - 免费和付费到底怎么选?

本文完整版:最好用的 6 款 MongoDB GUI 管理工具横向测评 - 免费和付费到底怎么选? MongoDB GUI 管理工具横向测评 Mongo Shell - MongoDB 内置的 Shell 命令行,免费基础款MongoDB Compass - MongoDB 官方版全功能开源管理工具Studio 3T - MongoDB 管理…

Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗?

本文完整版:《Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗》 Vite 与 Vue Cli 对比一、Vite 与 Vue CLI 是什么?Vue CLI 的特点Vite 的特点二、Vite 和 Vue Cli 区别三、Vite 会取代 vue-cli 吗?尤雨溪在 Twitter 上说四、尤雨溪…

如何提升你的能力?给年轻程序员的几条建议

转载来源:http://tech.glowing.com/cn/advices-to-junior-developers/ 一转眼工作已有8年,前两天公司一位初入职场的同事希望我给一些建议与经验。我觉得这个话题很有价值,这里以个人的想法与经历写成此文,希望给年轻的开发者们一…

速读原著-TCP/IP(Ping程序)

7.2 Ping程序 我们称发送回显请求的 p i n g程序为客户,而称被 p i n g的主机为服务器。大多数的 T C P / I P实现都在内核中直接支持 P i n g服务器—这种服务器不是一个用户进程(在第 6章中描述的两种I C M P查询服务,地址掩码和时间戳请求…

最好用的 8 款 React Datepicker 时间日期选择器测评推荐

本文完整版:《最好用的 8 款 React Datepicker 时间日期选择器测评推荐》 React Date Time Picker 时间选择器1. React-Datepicker - 经典中的经典,常规场景闭眼选它2. Material-UI date time pickers - 海量场景考验,质量保证,Ma…

UPESB高可用方案

确保高可用性的方案 −支持Active/Active方式的聚类,保障较高的执行性能和稳定性。在多节点上分散部署服务流,支持连接,就可以实现有效的分布处理。Flow上该系统失败时,可以定义为执行transaction的rollback以及补偿process。Clus…

速读原著-TCP/IP(IP记录路由选项)

7.3 IP记录路由选项 p i n g程序为我们提供了查看 I P记录路由(R R)选项的机会。大多数不同版本的 p i n g程序都提供-R选项,以提供记录路由的功能。它使得 p i n g程序在发送出去的I P数据报中设置I P R R选项(该I P数据报包含…