uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型

使用vue3+ts+vite+uniapp开发小程序或者跨平台app的趋势越来越高,有一个顺手的UI的框架还是非常重要的,官方维护的 uni-ui,支持全端,而且有类型提示,目前已经内置到 GitHub - Sjj1024/uniapp-vue3: 使用uniapp和vue3 + ts + pinia + echarts + uview-plus开发的模板框架,为了防止自己建模板出错,集成了echart等所有的环境 了,如果用户确实用不到里面的组件也可以删除,减少包体积。

经过搜寻了一番,目前参加对比的 UI 框架有:

1. uv-ui (uveiw 系) - https://www.uvui.cn/

2.uview-plus (uveiw 系) - 文档地址

3.Wot Design Uni (wot 系) - 文档地址

4.TuniaoUI (图鸟系) - 文档地址

还有 2 个 UI 框架也很优秀,但是只有部分组件开源免费,大半组件收费:

ThorUI 文档链接

FirstUI 文档链接

温馨提示:

  1. 收费没有对错,开源作者也要恰饭,需要有收入,光为爱发电可能半路夭折,或者质量很差。只要做得好,别人愿意买,提供优质的服务,也是极好的。

UI 框架对比

1. 开源热度

截止到 2024-05-18 发表文章时的数据:

UI 框架uv-uiuview-pluswotTuniaoUI
github stars551335447187
gitee stars1.1K15480-
github forks28916920
gitee forks71513-

其实到这里就一决高下了,github star 数uv-ui > uview-plus > wot> TuniaoUI,其中 uv-ui 拔得头筹。

2. 多端支持情况

UI 框架uv-uiuview-pluswotTuniaoUI
h5
app(ios)
app(android)
微信小程序
支付宝小程序
QQ 小程序
百度小程序
头条小程序

3. 组件数量

UI 框架uv-uiuview-pluswotTuniaoUI
总数67676255
基础组件81185
表单组件16172014
数据组件134184
反馈组件810168
布局组件79-8
导航组件8875
其他组件78-5
内容组件---6

组件数:uv-ui(67) = uview-plus(67) > wot(62) > TuniaoUI(55)

4. ts 支持情况

查看4个组件库的源码,可以了解到:

uv-uiuView-plus 都是 js 写的,并非 ts,可以通过 ttou/uv-typings 提供类型支持(但是并没啥提示,不知道是不是使用不当)。

wotTuniaoUI 都是 ts 写的,编码体验会好很多。

5.一个月后更新数据

为啥更新,主要是 wotstar 上升飞快,而且是 vue3 + ts 写的,编码体验好。

UI 框架uv-uiuview-pluswotTuniaoUI
github stars448310303163

star-history-2024325.png

小知识:代码里如何辨别一个库是否有ts支持,写代码的时候按 ctrl + i (Mac 里 cmd + i),如果有提示就是有,啥都没有就是没有。

举个例子,编写 <xx-button type="" ...,在 type="" 双引号里面按 ctrl + i,看提示就知道了。

wot 有提示

image.png

 

uv-ui 无提示

image.png

tsconfig.json 文件里面 types 里面的 @ttou/uv-typings/v3 改为 @ttou/uv-typings/v2 就正常了(也是群友发现的),如下。

image.png

总结

很高兴 uv-ui 是最终的幸运儿。为此我特意去 uv-ui 官网里面捐赠了一杯咖啡钱给作者,开源不易,要支持一下。

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

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

相关文章

搭建CMS系统

搭建CMS系统 1 介绍 内容管理系统&#xff08;Content Management System&#xff0c;CMS&#xff09;是一种用于管理、发布和修改网站内容的系统。开源的CMS系统有WordPress、帝国CMS等&#xff0c;国产的Halo很不错。 WordPress参考地址 # 官网 https://wordpress.org/# …

为什么IP地址需要划分为公有和私有地址?

一.知识点的解释 1.在现在的网络中&#xff0c;IP地址分为公网IP地址和私有IP地址。公网IP是在Internet使用的IP地址&#xff0c;而私有IP地址则是在局域网中使用的IP地址。 2.私有IP地址是一段保留的IP地址。只使用在局域网中&#xff0c;无法在Internet上使用。 二.为什么…

Python脚本必加代码:99%的程序员都忽视了这个细节!

文章目录 一、初识 if __name__ __main__二、__name__ 和 __main__ 是什么&#xff1f;三、实战讲解四、实际应用场景测试代码提高代码可重用性避免不必要的执行 五、深入理解和更多用法使用 argparse 解析命令行参数使用 unittest 进行单元测试使用 multiprocessing 创建子进…

c#入门学习笔记

p35 字符串 在字符串之前加上一个&#xff0c;可以保持原生字符&#xff0c;不用再进行转义&#xff08;除了双引号&#xff09;。 例如&#xff1a; "A short list: item 1 item 2"或者&#xff1a; "C:\Temp\MyDir\MyFile.doc"这相当于"C:\\Tem…

网盘攻略,羊毛薅到底,这4招太狠了

仅供参考 先买原石会员账户&#xff0c;再绑手机。 自己手机千万不要去注册115&#xff0c;先去马云家买原石会员帐户(五十多自带33T永久空间&#xff0c;非常实惠)。买完原石帐户后再用手机登录绑定帐户和修改密码。买8T永久空间8年VIP 然后再花560元买8T永久空间8年vip&…

嵌入式全栈开发学习笔记---C语言笔试复习大全22

目录 结构体 结构体的声明 定义结构体变量 访问结构体成员进行初始化 通过结构体变量名访问结构体成员 结构体指针 结构体指针的定义 通过结构体指针访问结构体成员 结构体数组 结构体数组的定义 遍历结构体数组 结构体的长度&#xff08;笔试重点&#xff09; 上一…

深入理解C++多态-虚函数

引言 C多态的实现方式可以分为静态多态和动态多态&#xff0c;其中静态多态主要有函数重装和模板两种方式&#xff0c;动态多态就是虚函数。下面我们将通过解答以下几个问题的方式来深入理解虚函数的原理&#xff1a; 为什么要引入虚函数&#xff1f;&#xff08;用来解决什么…

2024年最新信息安全标准汇总

这些标准是我们在数字化时代保障网络安全、数据安全的重要基石&#xff0c;对于维护国家安全、企业利益和个人信息安全具有至关重要的作用。 随着科技的快速发展&#xff0c;网络空间的安全威胁也在不断演变&#xff0c;从复杂的网络攻击到个人信息泄露&#xff0c;这些安全风…

JAVA面试题大全(十四)

1、Kafka 可以脱离 Zookeeper 单独使用吗&#xff1f;为什么&#xff1f; kafka不能脱离zookper单独使用&#xff0c;因为kafka使用zookper管理和协调kafka的节点服务器。 2、Kafka 有几种数据保留的策略&#xff1f; Kafka提供了多种数据保留策略&#xff0c;这些策略用于定…

哈希双指针

文章目录 一、哈希1.1两数之和1.2字母异位词分组1.3最长子序列 二、双指针2.1[移动零](https://leetcode.cn/problems/move-zeroes/description/?envTypestudy-plan-v2&envIdtop-100-liked)2.2[盛最多水的容器](https://leetcode.cn/problems/container-with-most-water/d…

嵌入式0基础开始学习 ⅠC语言(7)指针

0.问题引入 int a 5; a 1024; //把1024存放到变量a的地址中去 b a; // 取变量a的值&#xff0c;赋值给b >在c语言中&#xff0c;任何一个变量&#xff0c;都有两层含义 (1)代表变量的存储单元的地址&#xff1a;变量的地址…

蓝桥楼赛第30期-Python-第三天赛题 统计学习数据题解

楼赛 第30期 Python 模块大比拼 统计学习数据 介绍 JSON&#xff08;JavaScript Object Notation, /ˈdʒeɪsən/&#xff09;是一种轻量级的数据交换格式&#xff0c;最初是作为 JavaScript 的子集被发明的&#xff0c;但目前已独立于编程语言之外&#xff0c;成为了通用的…

分享10个国内可以使用的GPT中文网站

在今天的人工智能领域&#xff0c;基于对话的语言模型已成为研究的热点&#xff0c;尤其是像 ChatGPT 这样因其出色的语言理解与对话交互能力而广受关注的模型。本文将介绍10个国内可以直接使用GPT的网站&#xff0c;旨在为大家在选择和使用这些优秀的AI工具时提供有价值的参考…

使用pyqt绘制一个爱心!

使用pyqt绘制一个爱心&#xff01; 介绍效果代码 介绍 使用pyqt绘制一个爱心&#xff01; 效果 代码 import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget from PyQt5.QtGui import QPainter, QPen, QBrush, QColor from PyQt5.QtCore import Qt, Q…

[保姆式教程]使用目标检测模型YOLO V8 OBB进行旋转目标的检测:训练自己的数据集(基于卫星和无人机的农业大棚数据集)

最近需要做基于卫星和无人机的农业大棚的旋转目标检测&#xff0c;基于YOLO V8 OBB的原因是因为尝试的第二个模型就是YOLO V8&#xff0c;后面会基于YOLO V9模型做农业大棚的旋转目标检测。YOLO V9目前还不能进行旋转目标的检测&#xff0c;需要修改代码 PS:欢迎大家分享农业大…

【研发日记】Matlab/Simulink技能解锁(九)——基于嵌入式处理器仿真

文章目录 前言 基于嵌入式处理器仿真 使用方式 第一步&#xff0c;硬件连接 第二步&#xff0c;配置硬件资源 第三步&#xff0c;配置XCP协议 第四步&#xff0c;加载Contrl Model 第五步&#xff0c;运行仿真 第六步&#xff0c;仿真报告 分析和应用 总结 参考资料 前言…

无线技术整合到主动噪声控制(ANC)增强噪声降低性能

主动噪声控制&#xff08;ANC&#xff09;已成为一种广泛使用的降噪技术。基本原理是通过产生与外界噪音相等的反向声波&#xff0c;将噪音中和&#xff0c;从而达到降噪的效果。ANC系统通常包括以下几个部分&#xff1a;参考麦克风、处理芯片、扬声器和误差麦克风。参考麦克风…

家政保洁服务小程序怎么做?家政公司快速搭建专属小程序

在数字化时代背景下&#xff0c;家政保洁服务行业也迎来了线上转型的新机遇。家政保洁服务小程序&#xff0c;作为一种新型的线上服务平台&#xff0c;不仅能够提升家政公司的服务效率&#xff0c;还能为顾客提供更加便捷的预约上门服务体验。那么家政保洁服务小程序怎么做呢&a…

AI与量子计算:科技新时代的双重飞跃

在科技的浪潮中,每一次技术革新都如同一次深海潜行,探寻着未知的奥秘。近年来,人工智能(AI)和量子计算两大领域的发展尤为引人注目,它们不仅代表了科技的未来趋势,更是人类社会进步的强大动力。本文将深入探讨这两项技术的最新进展、潜在影响以及它们之间的潜在联系。 …

2024年3月小程序类目调整汇总公告

各位小程序开发者&#xff1a; 为进一步加强平台的规范管理&#xff0c;优化开发者类目选择体验&#xff0c;现对以下类目进行调整&#xff0c;请各位开发者知悉。 类目调整 #【文娱-小说】 现资质要求 &#xff08;3选1&#xff09;&#xff1a; 1、提供《互联网出版许可…