【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

相关推荐
前端小小王7 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发17 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀39 分钟前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪1 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6413 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻3 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云3 小时前
npm淘宝镜像
前端·npm·node.js
dz88i84 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr4 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook