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/# …

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

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

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

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

哈希双指针

文章目录 一、哈希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…

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

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

使用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…

从零开始搭建一个SpringBoot项目

目录 Spring BootSpring Boot 项目开发环境1、快速创建SpringBoot项目2、pom.xml 添加 Meavn 依赖3、配置application.yml4、验证数据库是否连接成功5、配置 Druid 数据源 Spring Boot 整合 MyBatis1、准备依赖2、application-dev.yml 配置3、启动类添加Mapper接口扫描器4、设置…

BWVS 靶场测试

一、PHP弱类型 is_numeric() 输入&#xff1a;127.0.0.1/BWVS/bug/php/code.php # 1、源代码分析 如果num不是数字&#xff0c;那么就输出num&#xff0c;同时如果num1&#xff0c;就输出flag。即num要是字符串又要是数字 # 2、函数分析&#xff1a; is_numeric()函数&…

《最新出炉》系列入门篇-Python+Playwright自动化测试-40-录制生成脚本

宏哥微信粉丝群&#xff1a;https://bbs.csdn.net/topics/618423372 有兴趣的可以扫码加入 1.简介 各种自动化框架都会有脚本录制功能&#xff0c; playwright这么牛叉当然也不例外。很早之前的selenium、Jmeter工具&#xff0c;发展到每种浏览器都有对应的录制插件。今天我们…

牛客NC392 参加会议的最大数目【中等 贪心+小顶堆 Java/Go/PHP 力扣1353】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/4d3151698e33454f98bce1284e553651 https://leetcode.cn/problems/maximum-number-of-events-that-can-be-attended/description/ 思路 贪心优先级队列Java代码 import java.util.*;public class Solution {/**…

java面试高级篇(JVM、Mysql、Redis、Kafka)

文章目录 面试专题-java高级篇1. JVM有做过jvm的调优吗?常用的jvm参数调优有哪些?如果jvm持续一段时间频繁的发生Young GC (轻GC) 可能原因有哪些? 2. Mysql2.1. 基本功(见为知笔记)2.2. 什么是索引2.3. 索引的优劣势2.4. MySQL的索引结构2.4.1. B-Tree索引2.4.2. BTree索引…

外卖系统源码开发全攻略:外卖小程序与后台管理系统的设计与实现

今天&#xff0c;小编将详细介绍外卖系统源码的开发全攻略&#xff0c;从需求分析到设计与实现&#xff0c;为开发者提供全面指导。 一、需求分析 1.用户需求 用户是外卖系统的核心&#xff0c;需满足以下基本需求&#xff1a; -浏览菜单并下单 -实时追踪订单 -多种支付方…

每日一题——博弈论(枚举与暴力)

博弈论 题目描述 运行代码 #include<iostream> #include<vector> using namespace std; int main(){int n;cin >> n;vector<int> d(n,0);for(int i 0;i < n;i){cin >> d[i];}vector<int> in(1000,0);for(int k 1;k<3;k){for(int…

ESP32烧录AT固件并进行MQTT通讯

首先下载AT固件 发布的固件 - ESP32 - — ESP-AT 用户指南 latest 文档 下载烧录工具 下载指导 - ESP32 - — ESP-AT 用户指南 latest 文档 烧录后注意usb的串口是不能发AT指令的 需要用16和17脚 用AT指令确认OK后连WIFI ATCWMODE1 //设置客户端模式 ATCWLAP …

mysql误删后使用binlog恢复数据

1 预期效果 使用 binlog 恢复数据的预期效果是将误删的数据还原到误删之前的状态&#xff0c;以减少或消除数据丢失的影响。通过正确解析和执行 binlog 中的操作记录&#xff0c;可以重新执行误删操作之后的插入、更新或删除操作&#xff0c;从而恢复被误删的数据。 数据恢复&…

Go微服务: Grpc服务注册在Consul的示例(非Go-Micro)

概述 现在&#xff0c;我们使用consul客户端的api来把GRPC服务实现注册到consul上&#xff0c;非Go-Micro的形式其实&#xff0c;consul官方提供了对应的接口调用来实现&#xff0c;golang中的consul/api包对其进行了封装我们使用consul/api来进行展示 目录结构 gitee.com/g…