unibest ui 库选择

背景

unibest 作为最好的 uniapp 开发模板，那 UI 框架 的选择也是要仔细斟酌的。

unibest 作为 uniapp + vue3 + ts 的项目，自然也要选择满足 vue3 的 UI库，所以像 vue2 时代的 uview 就不考虑在内了。但是在 uview 的基础上衍生出来的支持 vue3 的 uview 系 的 ui框架 还有不少，而且热度很高。

再来说说官方维护的 uni-ui，支持全端，而且有类型提示，目前已经内置到 unibest 了，如果用户确实用不到里面的组件也可以删除，减少包体积。

TIPS: uni-ui 本身是 js 开发的，但是官方提供了完备的类型提示( by @uni-helper/uni-ui-types)所以看起来就像是 ts 开发的一样，开发体验很好。所有的组件都有提示，很方便，很贴心。

再次重申一下 uview 不支持 Vue3，不然又有人问我为啥不用 uview。（臣妾做不到啊~）

UI 框架

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

uv-ui (uveiw 系) - 文档地址
uview-plus (uveiw 系) - 文档地址
Wot Design Uni (wot 系) - 文档地址
TuniaoUI （图鸟系） - 文档地址

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

ThorUI 文档链接
FirstUI 文档链接

温馨提示：

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

2.当然了 unibest 作为开源库，自然会选择免费的 UI 框架，下面我们就来对比一下下~

UI 框架对比

1. 开源热度

截止到 2024-02-20 发表文章时的数据:

UI 框架	uv-ui	uview-plus	wot	TuniaoUI
github stars	358	291	226	141
gitee stars	555	126	35	-
github forks	16	73	31	12
gitee forks	40	5	6	-

其实到这里就一决高下了，github star 数： uv-ui(358) > uview-plus(291) > wot(226) > TuniaoUI(141)，其中 uv-ui 拔得头筹。再经过人眼观察和对比两者官网的组件，最终我们选定 uv-ui 作为我们的 UI 框架。

源码仓库地址展示如下，纯粹为了方便大家查阅 （虽然大概率你们也不会去访问，/手动狗头）

UI 框架	文档地址	github	gitee
uv-ui	www.uvui.cn/	github.com/climblee/uv…	gitee.com/climblee/uv…
uview-plus	uiadmin.net/uview-plus/	github.com/ijry/uview-…	gitee.com/uiadmin/uvi…
wot	wot-design-uni.netlify.app/	github.com/Moonofweish…	gitee.com/wot-design-…
TuniaoUI	vue3.tuniaokj.com/zh-CN/	github.com/tuniaoTech/…	-

接着奏乐接着舞，我们继续正文 ^_^

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.一个月后更新数据（2024-03-25）

下面数据是一个月后的 2024-03-25 更新的。

为啥更新，主要是 wot 的 star 上升飞快，而且是 vue3 + ts 写的，编码体验好，已经考虑改用 wot 了。

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

New Image

目前 uv-ui 和 wot 趋势最猛，偷偷告诉大家，我跟2个UI库的作者都是好朋友。另外，我在 uv-ui 群里面是群主（uv-ui作者 授予我的），wot作者 是我的微信好友，且他在 unibest交流群 里，入群那天欢迎仪式很容重，哈哈。

star history 实时对比地址： star-history.com/#Moonofweis…

star history 实时对比图片： api.star-history.com/svg?repos=M…

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

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