使用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-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 官網里面捐贈了一杯咖啡錢給作者，開源不易，要支持一下。