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 框架有：

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

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

4.TuniaoUI （图鸟系） - 文档地址

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

温馨提示：

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

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

UI 框架	uv-ui	uview-plus	wot	TuniaoUI
github stars	551	335	447	187
gitee stars	1.1K	154	80	-
github forks	28	91	69	20
gitee forks	71	5	13	-

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

UI 框架	uv-ui	uview-plus	wot	TuniaoUI
h5	✅	✅	✅	✅
app(ios)	✅	✅	✅	✅
app(android)	✅	✅	✅	✅
微信小程序	✅	✅	✅	✅
支付宝小程序	✅	✅	✅	✅
QQ 小程序	✅	✅	❌	❌
百度小程序	✅	✅	❌	❌
头条小程序	✅	✅	❌	❌

UI 框架	uv-ui	uview-plus	wot	TuniaoUI
总数	67	67	62	55
基础组件	8	11	8	5
表单组件	16	17	20	14
数据组件	13	4	18	4
反馈组件	8	10	16	8
布局组件	7	9	-	8
导航组件	8	8	7	5
其他组件	7	8	-	5
内容组件	-	-	-	6

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

查看4个组件库的源码，可以了解到：

uv-ui 和 uView-plus 都是 js 写的，并非 ts，可以通过 ttou/uv-typings 提供类型支持（但是并没啥提示，不知道是不是使用不当）。

wot 和 TuniaoUI 都是 ts 写的，编码体验会好很多。

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

UI 框架	uv-ui	uview-plus	wot	TuniaoUI
github stars	448	310	303	163

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

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

wot 有提示

uv-ui 无提示

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

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