前端UI框架整理

2023-11-18

1.TDesign

腾讯最近刚刚公开的一套UI框架,个人感觉不错,桌面与移动端都有,下面是官网介绍:

TDesign 是什么

TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。
TDesign 具有统一的 设计价值观,一致的设计语言和视觉风格,帮助用户形成连续、统一的体验认知。在此基础上,TDesign 提供了开箱即用的 UI 组件库、设计指南 和相关 设计资产,以优雅高效的方式将设计和研发从重复劳动中解放出来,同时方便大家在 TDesign 的基础上扩展,更好的的贴近业务需求。

为什么会有 TDesign

过去,腾讯内部众多团队搭建了不同的设计体系和组件库产品,以满足各自的业务诉求,提升研发效能。这些体系各自独立维护,彼此割裂。并且,随着内部业务的规模不断扩大,这种割裂的局面愈发严重。
为了应对这一情况,腾讯内部建立了 开源协同委员会,参考开源社区的组织方式,将同类项目的不同技术团队聚合在一起,开源共建。TDesign 在这样的背景下应运而生,在腾讯内部以开源协同的方式,共建一个完善、易用的设计体系和组件库产品。

TDesign 的发展

TDesign 在创建之初就严格按照开源协作的原则运作,包括源代码在内的协作方案讨论、组件设计及 API 制定的过程也完全在公司内源上开放。也得到了公司内开发和设计同学的广泛关注,无论以什么身份参与,TDesign 都同样遵循平等、公开且严格的原则来对待,很多同学从个人项目中试用组件库开始,到提交第一个 Bug Issue,再到提交第一个 Feature MR,最后逐步参与到 MR Review 和方案制定工作中,成为核心贡献者。在过去的一年中,TDesign 关闭了 1k+ Issue,进行了 5k+ 次 CR,保持 每周迭代 发布新版本。
组件库目前支持多个业界主流的开发技术栈,桌面端 Vue2 已发布 Beta 版本,桌面端 Vue3、React 和移动端 Vue3 、微信小程序发布 Alpha 内测版本:

桌面端

仓库 描述 状态

tdesign-vue Vue 2.x 技术栈 Beta
tdesign-vue-next Vue 3.x 技术栈 Alpha
tdesign-react React 16.x 技术栈 Alpha
tdesign-angular 基于 Angular 10 实现 待上线

移动端

仓库 描述 状态

tdesign-mobile-vue Vue 3.x 技术栈 Alpha
tdesign-miniprogram 微信小程序 Alpha
tdesign-mobile-react React 16.x 技术栈 待上线
tdesign-flutter 1.17.0 待上线
同时,TDesign 与腾讯内部在各自的领域具有丰富行业经验业务团队正协作中,提供更多具有业务属性的组件库产品,未来会有包括政务、零售等多个不同风格及组件类型的组件库产品开放出来,敬请期待!

2.NutUI

京东家的主打移动端和小程序,可以配合京东的taro写多端小程序

NutUI 是京东风格的移动端组件库,它支持使用 Vue 语言来编写可以在 H5,小程序平台上的应用,帮助研发人员提升开发效率,改善开发体验。

特性

70+ 高质量组件(3.0 持续开发中)
基于京东APP 10.0 视觉规范
支持按需引用
详尽的文档和示例
支持 TypeScript
支持服务端渲染(测试阶段)
支持定制主题
单元测试覆盖(3.0 开发中)

3.Taro UI Vue3

还是京东家的,基于 Taro 开发,采用 Vue 3.0 重写的 Taro UI 组件库,主要还是移动端H5与多端小程序

介绍

taro-ui-vue3 是一款基于 Taro 框架开发, 并采用 Vue 3.0 重写的 Taro UI 组件库

Taro

Taro 是由 京东·凹凸实验室 倾力打造的多端开发解决方案。现如今市面上端的形态多种多样,Web、ReactNative、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码。

特性

基于 Taro 开发, 采用 Vue 3.0 重写的 UI 组件
一套组件可以在 微信小程序,支付宝小程序,百度小程序,H5 多端适配运行(ReactNative 端暂不支持)
提供友好的 API,可灵活的使用组件

4.Cube UI

滴滴家的,移动端UI

介绍

cube-ui 是基于 Vue.js 实现的精致移动端组件库。

特性

质量可靠

由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。

体验极致

以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。

标准规范

遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。

扩展性强

支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。

5.Ant Design

阿里家的UI框架,同样是各个版本都有,桌面端与移动端都有,覆盖很全面。官网里面都有资源链接就不一个个单独放出来了,下面是官网介绍:

介绍

蚂蚁集团的企业级产品是一个庞大且复杂的系统,数量多且功能复杂,而且变动和并发频繁,常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容。

随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标,我们(蚂蚁集团体验技术部)经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观,通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验。

前端实现

我们采用 React 封装了一套 Ant Design 的组件库,也欢迎社区其他框架的实现版本。

Ant Design of React(官方实现)
NG-ZORRO - Ant Design of Angular
NG-ZORRO-MOBILE - Ant Design Mobile of Angular
Ant Design of Vue
Ant Design Blazor
San UI Toolkit for Ant Design
antizer (ClojureScript)

6.Element Plus

饿了么出的,也算是阿里家的了,桌面端UI

官网好像没有之前地址的链接,这里就放一下

element-ui

7.Vant

有赞出的,移动端UI框架

介绍

Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。

版本提示

你当前浏览的是 Vant 3.x 版本 的文档,适用于 Vue 3 开发。如果你在使用 Vue 2,请浏览 Vant 2 文档。

特性

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端UI框架整理 的相关文章

随机推荐

  • vue2解决并实现页面刷新内容不变化

    前言 我们都知道 在vue中数据是响应式的 但是对于刷新的之后数据也会丢失 这就得借助于数据库存储 那么在vue中怎么去实现数据库的连接以及数据传输呢 下面我们来一起看一看 在之前我也在这个问题上困扰了很长时间 为了让大家都能看得懂 给大家
  • WPF之UI虚拟化

    在WPF应用程序开发过程中 大数据量的数据展现通常都要考虑性能问题 有下面一种常见的情况 原始数据源数据量很大 但是某一时刻数据容器中的可见元素个数是有限的 剩余大多数元素都处于不可见状态 如果一次性将所有的数据元素都渲染出来则会非常的消耗
  • neutron的DHCP错误之”sudo: unable to resolve host node-1\novs-vsctl:“

    问题背景 使用ESX创建虚拟机 并在虚拟机上创建一个三节点的openstack环境 参考官方的ICEHOUSE版本 注 ubuntu 14 04只支持到icehouse版 为加快虚拟机的创建时间 本文首先创建了一个控制节点c 1 并进行更新
  • pci无线配置服务器,PCI配置空间(中文).doc

    PCI Configuration 名词说明 PCI为Peripheral Component Interconnect 的缩写 它是由 Intel 所发表的另一种局部总线 另一种为 VESA Local Bus 以配合 Pentium 系
  • ACE_Proactor实现

    ACE Proactor实现了Facade模式 其方法可以分为四类 生命周期管理方法 事件循环管理方法 定时器管理方法 IO操作facilitator方法 须知ACE Proactor是使用Bridge模式的 ACE aynch Read
  • 内网安全-隧道搭建&穿透上线&FRP&NPS&Ngrok

    目录 环境介绍 内网穿透 Ngrok 入门 上线 tcp协议 内网穿透 Frp 简易型 上线 内网穿透 Nps 自定义 上线 环境介绍 实验目的 让msf上线外网 通常情况下 内网可以访问外网 但是外网无法访问到内网 所以外网的木马通常情况
  • 将二叉树转为有序的双向链表

    一 题目要求 输入一棵二叉排序树 现在要将该二叉排序树转换成一个有序的双向链表 而且在转换的过程中 不能创建任何新的结点 只能调整树中的结点指针的指向来实现 include
  • AHB to APB bridge

    目录 SPEC 验证框架图 测试点分解以及设计测试用例 测试点分解 设计测试用例 具体的Sequence及testcase Sequence testcase SPEC DUT如下 具体功能描述可参考ARM官方文档 AHB to APB s
  • 驾驭计算机视觉的翅膀:论文找代码的几种必杀技!

    摘要 对于CVer来说 代码和找代码 能力都是一种很重要的能力 毕竟idea再好只有通过代码实现出来才能发文章和刷榜 当我们阅读一篇高质量或者英文论文时 如何去找到该文章实现的代码 进而结合文章内容和代码实现去更好的理解作者所做的工作 只有
  • 什么是MVC设计模式

    直接上图 其中model 和view大家经常写 就不说了 有人可能并不清楚controller 到底是啥 其实就是经常写的 data source delegate outlet什么的 先撇开那些乱七八糟的箭头单看他们之间的分界线 view
  • C# 中BindingSource 的用法

    C BindingSource 1 引言 BindingSource组件是数据源和控件间的一座桥 同时提供了大量的API和Event供我们使用 使用这些API我们可以将Code与各种具体类型数据源进行解耦 使用这些Event我们可以洞察数据
  • mac os 搭建fortran环境

    首先从App Store下载Xcode 然后安装命令行工具 终端下输入 xcode select install 然后终端下输入如下命令 安装Homebrew ruby e curl fsSL https raw githubusercon
  • 使用缺省的拷贝构造函数带来的危险性

    我此前另外一篇文章通过类String看拷贝构造函数 赋值函数的作用和区别 对于更深的拷贝构造函数讨论大家可以参见这篇帖子 C 类对象的复制 拷贝构造函数 通过编写类String的拷贝构造函数和赋值函数介绍了一些拷贝构造数 本文着重介绍拷贝构
  • 前端面试题有哪些,有没有前端面试题库?

    全篇干货总结前端跳槽面试必备技能 如何看待面试 如何准备面试 注意事项有哪些 面试各环节考察的是什么 一面 考察基础知识 二面 考察能力广度和深度 三面 考察项目业务能力 终面 hr面 考察沟通能力 性格 潜力等等 一面的基础知识 在这分享
  • java定义一个周长类三角形_point类 三点的三角形的周长、面积 编程求解矩形和圆面积 java 三角形的定义...

    三角形的定义 1 先创建一个Point类 然后定义Trianglele类 在Trianglele类中定义三个Point的实体来表示一个三角形的三个点 再定义构造方法对这三个点进行初始化 然后定义两个方法求三角形的周长 面积 定义一个测试类
  • 算法:点与点之间欧式距离最小

    2017 03 10 问 知道一堆点 如何求出其中距离最近的一对 按欧式距离 除了暴力求解 还有没有其他的办法 这个算是最笨的办法 复杂度也比较高 我在另外一个博客里看到 他是用分治法的方式进行处理 而且也指出这个算法的难点在于如何将各种情
  • YOLO,VOC数据集标注格式解析

    YOLO数据集txt标注格式 0 0 160938 0 541667 0 120312 0 386111 分别指所标注内容的类别 归一化后的中心点x坐标 归一化后的中心点y坐标 归一化后的目标框宽度w 归一化后的目标况高度h 此处归一化指的
  • Fildder无法抓不到Firefox的包

    起因 Firefox这个浏览器对开发者太友好了 开发者工具看着很清爽 功能也很实用 就安装来用这个浏览器做项目测试 某次开发中发现某个请求有些问题 想用强大的Fiddler来看下前端到底是怎么发送的请求 问题来了 Fildder死活抓不到f
  • 什么是网络空间测绘?到底有什么作用?

    据X视新闻客户端报道 当地时间4月18日 谷歌地图服务开始以最大分辨率提供俄罗斯所有军事和战略设施的卫星图像 目前 包括各种洲际弹道D弹发射井 指挥所 秘密试验场等在内的俄战略要地均可以每像素约0 5米的分辨率查看 随后 谷歌公司已否认了
  • 前端UI框架整理

    1 TDesign 腾讯最近刚刚公开的一套UI框架 个人感觉不错 桌面与移动端都有 下面是官网介绍 TDesign 是什么 TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系 TDesign 具有统一的 设计价值观 一