使用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 官网里面捐赠了一杯咖啡钱给作者,开源不易,要支持一下。

Logo

前往低代码交流专区

更多推荐