【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 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr1 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
赵啸林1 小时前
npm发布插件超级简单版
前端·npm·node.js
罔闻_spider1 小时前
爬虫----webpack
前端·爬虫·webpack
吱吱鼠叔1 小时前
MATLAB数据文件读写:1.格式化读写文件
前端·数据库·matlab
爱喝水的小鼠2 小时前
Vue3(一) Vite创建Vue3工程,选项式API与组合式API;setup的使用;Vue中的响应式ref,reactive
前端·javascript·vue.js
盏灯2 小时前
前端开发,场景题:讲一下如何实现 ✍电子签名、🎨你画我猜?
前端
WeiShuai2 小时前
vue-cli3使用DllPlugin优化webpack打包性能
前端·javascript
Wandra2 小时前
很全但是超级易懂的border-radius讲解,让你快速回忆和上手
前端
ice___Cpu2 小时前
Linux 基本使用和 web 程序部署 ( 8000 字 Linux 入门 )
linux·运维·前端