uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型
很高兴uv-ui是最终的幸运儿。为此我特意去uv-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 文档链接
温馨提示:
- 收费没有对错,开源作者也要恰饭,需要有收入,光为爱发电可能半路夭折,或者质量很差。只要做得好,别人愿意买,提供优质的服务,也是极好的。
UI 框架对比
1. 开源热度
截止到 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
拔得头筹。
2. 多端支持情况
UI 框架 | uv-ui | uview-plus | wot | TuniaoUI |
---|---|---|---|---|
h5 | ✅ | ✅ | ✅ | ✅ |
app(ios) | ✅ | ✅ | ✅ | ✅ |
app(android) | ✅ | ✅ | ✅ | ✅ |
微信小程序 | ✅ | ✅ | ✅ | ✅ |
支付宝小程序 | ✅ | ✅ | ✅ | ✅ |
QQ 小程序 | ✅ | ✅ | ❌ | ❌ |
百度小程序 | ✅ | ✅ | ❌ | ❌ |
头条小程序 | ✅ | ✅ | ❌ | ❌ |
3. 组件数量
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. ts
支持情况
查看4个组件库的源码,可以了解到:
uv-ui
和 uView-plus
都是 js
写的,并非 ts
,可以通过 ttou/uv-typings
提供类型支持(但是并没啥提示,不知道是不是使用不当)。
wot
和 TuniaoUI
都是 ts
写的,编码体验会好很多。
5.一个月后更新数据
为啥更新,主要是
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
官网里面捐赠了一杯咖啡钱给作者,开源不易,要支持一下。
更多推荐
所有评论(0)