uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型

2024-06-04 1297阅读

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型 第1张

使用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/

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型 第2张

2.uview-plus (uveiw 系) - 文档地址

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型 第3张

3.Wot Design Uni (wot 系) - 文档地址

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型 第4张

4.TuniaoUI (图鸟系) - 文档地址

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型 第5张

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

ThorUI 文档链接

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型 第6张

FirstUI 文档链接

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型 第7张

温馨提示:

  1. 收费没有对错,开源作者也要恰饭,需要有收入,光为爱发电可能半路夭折,或者质量很差。只要做得好,别人愿意买,提供优质的服务,也是极好的。

UI 框架对比

1. 开源热度

截止到 2024-05-18 发表文章时的数据:

UI 框架uv-uiuview-pluswotTuniaoUI
github stars551335447187
gitee stars1.1K15480-
github forks28916920
gitee forks71513-

其实到这里就一决高下了,github star 数: uv-ui > uview-plus > wot> TuniaoUI,其中 uv-ui 拔得头筹。

2. 多端支持情况

UI 框架uv-uiuview-pluswotTuniaoUI
h5
app(ios)
app(android)
微信小程序
支付宝小程序
QQ 小程序
百度小程序
头条小程序

3. 组件数量

UI 框架uv-uiuview-pluswotTuniaoUI
总数67676255
基础组件81185
表单组件16172014
数据组件134184
反馈组件810168
布局组件79-8
导航组件8875
其他组件78-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-uiuview-pluswotTuniaoUI
github stars448310303163

uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型 第8张

小知识:代码里如何辨别一个库是否有ts支持,写代码的时候按 ctrl + i (Mac 里 cmd + i),如果有提示就是有,啥都没有就是没有。

举个例子,编写


    免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

    目录[+]