uniapp 常用 UI 组件库

news2025/7/15 14:25:51

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。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2377036.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

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

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

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

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

SpringBoot中的Lombok库

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

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…

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

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

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…

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

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

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

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

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

一、物理机故障修复的核心影响因素 物理机作为企业 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. 添加…

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

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

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

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

降本增效双突破:Profinet转Modbus TCP助力包布机产能与稳定性双提升

在现代工业自动化领域&#xff0c;ModbusTCP和Profinet是两种常见的通讯协议。它们在数据传输、设备控制等方面有着重要作用。然而&#xff0c;由于这两种协议的工作原理和应用环境存在差异&#xff0c;直接互联往往会出现兼容性问题。此时&#xff0c;就需要一种能够实现Profi…

JESD204 ip核使用与例程分析(一)

JESD204 ip核使用与例程分析(一) JESD204理解JESD204 与JESD204 PHY成对使用原因JESD204B IP核JESD204B IP核特点JESD204B IP核配置第一页第二页第三页第四页JESD204 PHY IP核配置第一页第二页JESD204理解 JESD204B是一种针对ADC、DAC设计的传输接口协议。此协议包含四层, …

Kubernetes控制平面组件:Kubelet详解(一):API接口层介绍

云原生学习路线导航页&#xff08;持续更新中&#xff09; kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计&#xff08;一&#xff09;Kubernetes架构原则和对象设计&#xff08;二&#xff09;Kubernetes架构原则和对象设计&#xff08;三&#xff09;Kubernetes控…

牛客网NC22015:最大值和最小值

牛客网NC22015&#xff1a;最大值和最小值 题目描述 题目要求 输入&#xff1a;一行&#xff0c;包含三个整数 a, b, c &#xff08;1≤a,b,c≤1000000&#xff09; 输出&#xff1a;两行&#xff0c;第一行输出最大数&#xff0c;第二行输出最小数。 样例输入&#xff1a; …