【unibest】 uniapp + vue3 模板 UI 框架选型篇

背景

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

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

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

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

UI 框架

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

还有 2 个 UI 框架也很优秀,但是部分组件开源免费,部分组件收费:

温馨提示:

  1. 收费没有对错,开源作者也要恰饭,需要有收入,光为爱发电可能半路夭折,或者质量很差。只要做得好,别人愿意买,提供优质的服务,也是极好的。PS:人家不仅提供付费组件,还会提供很多模板,比如登录页面,100元 一套,性价比还是不错的。

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

UI 框架对比

1. 开源热度

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

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

其实到这里就一决高下了,uview 系的 2 位胜出,而且 uv-ui 以小小优势胜过 uview-plus。再经过人眼观察和对比两者官网的组件,最终我们选定 uv-ui 作为我们的 UI 框架

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

UI 框架 github repo url gitee repo url
uview-plus github.com/ijry/uview-... gitee.com/uiadmin/uvi...
uv-ui github.com/climblee/uv... gitee.com/climblee/uv...
Wot github.com/Moonofweish... gitee.com/wot-design-...
TuniaoUI github.com/tuniaoTech/... -

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

2.多端支持情况

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

3.组件数量

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

4.ts 支持情况

很不幸,上面几个都不支持 ts,没有类型提示,只能对着它们的文档撸代码。

总结

很高兴我们已经为宇宙最强 uniapp 开发模板 unibest 选好了 UI 组件库uv-ui 是最终的幸运儿。为此我特意去 uv-ui 官网里面捐赠了一杯咖啡钱给作者,开源不易,要支持一下。

其实另外几个 UI框架 我也捐了几块钱,聊表心意,表示支持。

好文推荐

🔥2024 年最好用的 uniapp 开发模板,近一个月 star 数飙升!🔥 - 点赞数:274, 收藏数:581

相关推荐
小墨宝16 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED32 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿36 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子36 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
七七小报1 小时前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app
lh_12541 小时前
uniapp 常用开发技巧与实战指南
uni-app
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js