【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

相关推荐
晚霞的不甘1 天前
Flutter for OpenHarmony构建全功能视差侧滑菜单系统:从动效设计到多页面导航的完整实践
前端·学习·flutter·microsoft·前端框架·交互
黎子越1 天前
python相关练习
java·前端·python
北极糊的狐1 天前
若依项目vue前端启动键入npm run dev 报错:不是内部或外部命令,也不是可运行的程序或批处理文件。
前端·javascript·vue.js
XRJ040618xrj1 天前
Nginx下构建PC站点
服务器·前端·nginx
We་ct1 天前
LeetCode 289. 生命游戏:题解+优化,从基础到原地最优
前端·算法·leetcode·矩阵·typescript
yqcoder1 天前
uni-app 之 设置导航
uni-app
2501_915918411 天前
把 iOS 性能监控融入日常开发与测试流程的做法
android·ios·小程序·https·uni-app·iphone·webview
有诺千金1 天前
VUE3入门很简单(4)---组件通信(props)
前端·javascript·vue.js
2501_944711431 天前
Vue-路由懒加载与组件懒加载
前端·javascript·vue.js
2601_949804921 天前
开源多商户商城源码最新版_适配微信小程序+H5+APP+PC多端
微信小程序·小程序