当前位置: 首页 > article >正文

uniapp 常用 UI 组件库

1. uView UI

在这里插入图片描述

  • 特点
    • 组件丰富:提供覆盖按钮、表单、图标、表格、导航、图表等场景的内置组件。
    • 跨平台支持:兼容 App、H5、小程序等多端。
    • 高度可定制:支持主题定制,组件样式灵活。
    • 实用工具类:提供时间、数组操作等工具方法。
    • 良好文档和社区支持
  • 适用场景:需要快速开发常规多端项目,注重组件质量和样式一致性。
  • 开源热度:GitHub stars 568,Gitee stars 555。
  • 官网链接:https://uviewui.com/

2. TDesign请添加图片描述

  • 特点
    • 企业级设计体系:由腾讯出品,组件设计优秀,覆盖多端。
    • 技术支持:支持 Vue2、Vue3、React 等多种框架。
    • 组件丰富:提供丰富的组件,适合复杂项目。
    • 注重设计和视觉效果
  • 适用场景:注重设计和视觉效果的项目,基于 Vue3 的 uni-app 项目。
  • 开源热度:GitHub stars 2.7k。
  • 官网链接:https://tdesign.tencent.com/

3. NutUI

在这里插入图片描述

  • 特点
    • 京东风格:京东开源,稳定可靠。
    • 组件丰富:支持多端,提供电商类组件如 SKU 选择器。
    • 技术支持:基于 Vue3 构建。
  • 适用场景:电商类项目开发,使用 Vue3 技术栈的 uni-app 项目。
  • 开源热度:GitHub stars 5.4k。
  • 官网链接:https://nutui.jd.com/3x/#/

4. Varlet UI

在这里插入图片描述

  • 特点
    • Material 风格:基于 Vue3 开发的 Material 风格移动端组件库。
    • 组件丰富:提供多种组件,适合移动端开发。
    • 技术支持:支持 Vue3。
  • 适用场景:移动端项目,注重 Material 设计风格。
  • 开源热度:GitHub stars 4.2k。
  • 官网链接:https://varletjs.org/#/zh-CN/index

5. Thor UI

在这里插入图片描述

  • 特点
    • 轻量简洁:组件轻量、简洁、全面。
    • 多端支持:支持微信小程序和 uni-app。
    • 适用场景:轻量型项目或小型项目。
  • 适用场景:微信小程序和 uni-app 项目,注重轻量和简洁。
  • 开源热度:GitHub stars 2.3k。
  • 官网链接:https://www.thorui.cn/h5/#/

6. ColorUI

在这里插入图片描述

  • 特点
    • 视觉效果强大:支持渐变、阴影等丰富的样式。
    • 多种风格组件:适合有设计需求的项目。
    • 社区活跃:支持多端。
  • 适用场景:需要高颜值设计和强大视觉效果的项目。
  • 开源热度:GitHub stars 1.7k。
  • 官网链接:https://colorui.0i-i0.com/#/

7. wot-ui

在这里插入图片描述

  • 特点
    • 组件数量多:提供 71 个组件,包括基础、表单、数据、反馈、布局、导航等。
    • 技术支持:基于 Vue3 和 TypeScript 构建。
    • 多端支持:支持 H5、App、小程序等多端。
  • 适用场景:需要丰富组件和 TypeScript 支持的项目。
  • 开源热度:GitHub stars 492。
  • 官网链接:https://wot-design-uni.cn/

8. uView Plus

在这里插入图片描述

  • 特点
    • uView 升级版:主要对标 Vue3 技术栈。
    • 组件丰富:提供多种组件,支持多端。
    • 良好文档和社区支持
  • 适用场景:基于 Vue3 的 uni-app 项目,需要高质量组件和良好社区支持。
  • 开源热度:GitHub stars 362。
  • 官网链接:https://uview-plus.jiangruyi.com/

9. TuniaoUI

在这里插入图片描述

  • 特点
    • 组件数量适中:提供 55 个组件。
    • 技术支持:基于 Vue3 和 TypeScript 构建。
    • 多端支持:支持 H5、App、小程序等多端。
  • 适用场景:需要 TypeScript 支持的项目。
  • 开源热度:GitHub stars 192。
  • 官网链接:https://vue2.tuniaokj.com/

10. Grace UI请添加图片描述

  • 特点
    • 简单轻量:功能简单易用,学习成本低。
    • 多端支持:适配 uni-app,支持多端。
  • 适用场景:小型项目或轻量化开发。
  • 开源热度:GitHub stars 122。
  • 官网链接:https://www.graceui.com/

推荐选择

  • 快速开发多端项目:uView UI、TDesign。
  • App 和小程序项目:uView UI、Varlet UI。
  • 微信小程序为主:Vant Weapp、Thor UI、TDesign。
  • 轻量项目:Thor UI、Grace UI、ColorUI。
  • 电商项目:NutUI、Vant Weapp。
  • 注重设计和视觉效果:ColorUI、TDesign。
  • Vue3 技术栈项目:Varlet UI、NutUI、TDesign。

根据项目的具体需求和团队的技术栈,选择适合的组件库能够显著提升开发效率和用户体验。

相关文章:

uniapp 常用 UI 组件库

1. uView UI 特点: 组件丰富:提供覆盖按钮、表单、图标、表格、导航、图表等场景的内置组件。跨平台支持:兼容 App、H5、小程序等多端。高度可定制:支持主题定制,组件样式灵活。实用工具类:提供时间、数组操…...

SCI写作开挂!把Grammarly语法修订嵌入word

详细分享如何把Grammarly嵌入Word,实现英文写作时的实时语法校改。 ①进入Grammarly官网 ②点击右上角的“Get Grammarly Its free”会直接跳转到注册或者登录界面,如果还没有账号先注册。 ③注册或登录后进入这个页面,点击“Support”。 ④…...

PostgreSQL 配置设置函数

PostgreSQL 配置设置函数 PostgreSQL 提供了一组配置设置函数(Configuration Settings Functions),用于查询和修改数据库服务器的运行时配置参数。这些函数为数据库管理员提供了动态管理数据库配置的能力,无需重启数据库服务。 …...

2025年5月-信息系统项目管理师高级-软考高项-成本计算题

成本计算题挣值分析、成本计算题如何学?1、PV,EV,AC需要理解,根据题目给出的一些个条件需要求得这些值;2、CV,SV,CPI,SPI公式必须记住,需要根据求得的值判断项目的进度和成本的执行情况&#x…...

力扣-236.二叉树的最近公共祖先

题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个节点 p、q,最近公共祖先表示为一个节点 x,满足 x 是 p、q 的祖先且 x 的深度尽可能大(一个节点也可以…...

Go 中闭包的常见使用场景

在 Go 中,闭包(Closure) 是一个函数值,它引用了其定义时所在作用域中的变量。也就是说,闭包可以访问并修改外部作用域中的变量。 Go 中闭包的常见使用场景 ✅ 1. 封装状态(无须结构体) 闭包可…...

SpringBoot中的Lombok库

一)Lombok库简介 Lombok是一个Java库,通过注解的方式简化代码编写,减少样板代码。它能够自动生成getter、setter、构造函数、toString等方法,提升开发效率。Lombok只是一个编译阶段的库,因此不会影响程序的运行。 二…...

《Java 大视界——Java 大数据在智能电网分布式能源协同调度中的应用与挑战》

随着风电、光伏等分布式能源大规模接入电网,传统调度系统面临数据规模激增、响应延迟显著、多源异构数据融合困难等核心问题。本文聚焦Java生态下的大数据技术体系,深入探讨其在智能电网实时监测、负荷预测、资源优化配置等场景中的落地实践。通过分析Sp…...

AI中的MCP是什么?MCP的作用及未来方向预测 (使用go-zero 快速搭建MCP服务器)

AI是当下最热的风。在当今AI技术飞速发展的时代,AI的应用已经渗透到我们日常生活的方方面面。然而,随着AI系统的复杂性不断增加,如何让AI具备更强的自主性和灵活性成为了业界关注的焦点。这就引出了Model Context Protocol(MCP&am…...

mac安装cast

背景 pycharm本地运行脚本时提示cast没有安装 问题原因 脚本尝试调用cast命令(以太坊开发工具foundry中的子命令),但您的系统未安装该工具。 从日志可见,错误发生在通过sysutil.py执行shell命令时。 解决方案 方法1&#xf…...

conda更换清华源

1、概览 anaconda更换速度更快、更稳定的下载源,在linux环境测试通过。 2、conda源查看 在修改之前可以查看下现有conda源是什么,查看conda配置信息,如下: cat ~/.condarc 可以看到你的conda源,以我的conda源举例&am…...

[原创](现代Delphi 12指南):[macOS 64bit App开发]: 注意“回车换行“的跨平台使用.

[作者] 常用网名: 猪头三 出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站 编程生涯: 2001年~至今[共24年] 职业生涯: 22年 开发语言: C/C++、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、 开发工具: Visual Studio、Delphi、XCode、…...

管理Oracle Data Guard的最佳实践

Oracle Data Guard的中文名字叫数据卫士,顾名思义,它是生产库的一道保障。所以管理Data Guard是DBA的一项重要工作之一,管理Data Guard时主要有以下几个注意点需要引起重视。 备份库的归档日志积压 一般情况下,生产库的归档日志是…...

一个简单点的js的h5页面实现地铁快跑的小游戏

以下是一个简化版的"地铁快跑"小游戏H5页面实现。这个游戏包含基本的角色跳跃、障碍物生成和计分系统&#xff0c;使用Canvas绘图技术实现。 完整源码 登录后复制 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-…...

作业帮Java后台开发面试题及参考答案(下)

final、finally、finalize 的区别是什么? final、finally和finalize是 Java 中三个功能完全不同的关键字,容易混淆,需从作用域、语法规则和实际用途等方面深入区分。 final的作用 final用于修饰类、方法和变量,体现 “不可变” 特性: 修饰类:表示该类不能被继承,例如 J…...

Hugging Face 中 LeRobot 使用的入门指南

相关源文件 .github/ISSUE_TEMPLATE/bug-report.yml .github/PULL_REQUEST_TEMPLATE.md README.md examples/1_load_lerobot_dataset.py examples/2_evaluate_pretrained_policy.py examples/3_train_policy.py lerobot/scripts/eval.py lerobot/scripts/train.py 本页面提供 …...

零基础入门Hadoop:IntelliJ IDEA远程连接服务器中Hadoop运行WordCount

今天我们来聊一聊大数据&#xff0c;作为一个Hadoop的新手&#xff0c;我也并不敢深入探讨复杂的底层原理。因此&#xff0c;这篇文章的重点更多是从实际操作和入门实践的角度出发&#xff0c;带领大家一起了解大数据应用的基本过程。我们将通过一个经典的案例——WordCounter&…...

HTML-3.3 表格布局(学校官网简易布局实例)

本系列可作为前端学习系列的笔记&#xff0c;代码的运行环境是在HBuilder中&#xff0c;小编会将代码复制下来&#xff0c;大家复制下来就可以练习了&#xff0c;方便大家学习。 系列文章目录 HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号 HTML…...

Maven构建流程详解:如何正确管理微服务间的依赖关系-当依赖的模块更新后,我应该如何重新构建主项目

文章目录 一、前言二、Maven 常用命令一览三、典型场景说明四、正确的构建顺序正确做法是&#xff1a; 五、为什么不能只在 A 里执行 clean install&#xff1f;六、进阶推荐&#xff1a;使用多模块项目&#xff08;Multi-module Project&#xff09;七、总结 一、前言 在现代…...

遗传算法求解旅行商问题分析

目录 一、问题分析 二、实现步骤 1&#xff09;初始化种群 2&#xff09;计算适应度 3&#xff09;选择操作 4&#xff09;交叉操作 5&#xff09;变异操作 三、求解结果 四、总结 本文通过一个经典的旅行商问题&#xff0c;详细阐述在实际问题中如何运用遗传算法来进…...

【hot100-动态规划-300.最长递增子序列】

力扣300.最长递增子序列思路解析 本题要求在一个整数数组 nums 中,找到最长严格递增子序列的长度。子序列是指从原数组中派生而来的序列,删除(或不删除)数组中的元素而不改变其余元素的顺序。例如,[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 动态规划思路 定义状态:…...

PostgreSQL malformed array literal异常

现象 在一个存储过程中编写如下代码&#xff08;省略与本异常无关的代码&#xff09;&#xff1a; declare hbsn_arr varchar(240)[]; #bddm.hbsn 内容类似于{"chain0":["NULL"],"chain1":["FESDF09402342","NULL"],...} …...

打造网络安全堡垒,企业如何应对DDoS、CC、XSS和ARP攻击

网站已经成为企业展示形象、开展业务和实现线上营销的重要平台。然而&#xff0c;随着网络攻击手段的不断升级&#xff0c;DDoS、CC、XSS、ARP等攻击频频出现&#xff0c;严重威胁到企业的信息安全和业务稳定。本文将详细阐述网站被攻击后应采取的应急措施及预防策略&#xff0…...

Oracle统计信息收集时的锁持有阶段

Oracle统计信息收集时的锁持有阶段 1 准备阶段&#xff08;共享模式锁&#xff09; 锁类型&#xff1a;对象级共享锁&#xff08;S锁&#xff09; 持续时间&#xff1a;通常1-5秒 主要操作&#xff1a; 验证对象存在性和权限检查统计信息首选项设置确定采样方法和并行度 监…...

深度解析物理机服务器故障修复时间:影响因素与优化策略

一、物理机故障修复的核心影响因素 物理机作为企业 IT 基础设施的核心载体&#xff0c;其故障修复效率直接关系到业务连续性。故障修复时间&#xff08;MTTR&#xff09;受多重因素交叉影响&#xff1a; 1. 故障类型的复杂性 硬件级故障&#xff1a; 简单故障&#xff1a;内存…...

印度全印度游戏联合会(AIGF)介绍与用途

本文为印度AIGF的介绍科普文&#xff0c;自去年开始&#xff0c;印度Rummy类游戏申请印度支付都需要拥有AIGF的会员及产品证书。 如需要rummy可以通过AIGF审核的源。码&#xff0c;或咨询AIGF的相关内容&#xff0c;可以联。系老妙。 全印度游戏联合会&#xff08;All India G…...

可视化数据图表怎么做?如何实现三维数据可视化?

目录 一、三维数据可视化的要点 1. 明确数据可视化的目标 2. 筛选与整理数据 3. 选择合适的图表类型 4. 运用专业工具制作 5. 优化图表的展示效果 二、数据可视化图表怎么做&#xff1f; 1. 理解三维数据的特性 2. 数据处理与三维建模 3. 设置光照与材质效果 4. 添加…...

什么是模态内异质性,什么是模态间异质性?

首先&#xff0c;理解一下“模态”&#xff08;Modality&#xff09;和“异质性”&#xff08;Heterogeneity&#xff09;。 模态&#xff1a;你可以简单理解为不同种类或形式的信息。比如&#xff1a; 文字&#xff08;文本&#xff09;是一种模态。图片&#xff08;图像&…...

视频分辨率增强与自动补帧

一、视频分辨率增强 1.传统分辨率增强方法 传统的视频分辨率增强方法主要基于插值技术。这些方法通过对低分辨率视频帧中已知像素点的分布规律和相邻像素之间的相关性进行分析&#xff0c;在两者之间插入新的像素点以达到增加视频分辨率的目的。例如&#xff0c;最近邻插值算…...

【SPIN】用Promela验证顺序程序:从断言到SPIN实战(SPIN学习系列--2)

你写了一段自认为“天衣无缝”的程序&#xff0c;但如何确保它真的没有bug&#xff1f;靠手动测试&#xff1f;可能漏掉边界情况&#xff1b;靠直觉&#xff1f;更不靠谱&#xff01;这时候&#xff0c;Promela SPIN组合就像程序的“显微镜”——用形式化验证技术&#xff0c;…...