百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

TDesign - 腾讯出品的免费开源前端 UI 组件库同时支持 Vue 2 和 Vue 3

toyiye 2024-04-06 13:45 26 浏览 0 评论

鹅厂新鲜出炉的企业级设计系统,支持 Vue 2、Vue 3 和 React,设计优雅、业务组件丰富,值得深入研究。

关于 TDesign

TDesign 是腾讯官方出品的产品研发解决方案,是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系,汇集了腾讯众多优秀组件库能力和设计研发经验。

和阿里的 Ant Design 类似,除了提供了开箱即用的前端开发 UI 组件库,还配备了设计指南和设计资源,帮助研发团队专注业务,让设计师和前端工程师以优雅高效的方式将设计和研发从重复劳动中解放出来,快速构建服务。

tdesign 官网

TDesign 的技术特性

  • 自带通用、完善的设计指南,提供 Sketch / Figma / XD 等常用设计工具源文件等设计资源
  • 基于设计指南开发了桌面端和移动端 UI 组件库,包含常用的基础 UI 组件,提供 Vue 2 / Vue 3 / React / Angular / Flutter 多个技术栈实现版本(发文时部分技术栈未上线)
  • 内置图标库,支持自定义主题,且内置了浅色和暗色两套色值,轻松切换
  • 官方提供了中后台 admin 解决方案 TDesign Starter,漂亮优雅,适配手机,开箱即用

tdesign 设计指南

上手体验

从 TDesign 的官网可以感受到来自腾讯内部多年设计经验提炼总结,通用性强,能够帮助产品经理、设计师、开发者等角色高效完成企业级产品的设计和研发。

TDesign 的前端 UI 组件库包含多个技术栈实现版本,即便我们的项目中使用了不同的技术架构或技术栈,也可以通过 TDesign 通用设计组件库进行开发,在构建统一/多端覆盖/跨技术栈的前端应用时有优势。

tdesign 组件文档

当前国内的 UI 设计风格扁平化当道,虽然 TDesign 的官网做了很多 3D 风格的宣传动图,但 UI 也还是扁平的,但具有浓重的“腾讯风格”,辨识度很高。交互动效有一点点偏向谷歌的 Material Design,但简洁了很多,没有后者复杂,用起来也相当舒服。当然针对不同产品的个性化需求,TDesign 支持对设计风格进行扩展,将设计样式梳理归纳为 Design Token,从而形成一套企业内部的语义化设计规范,也就是说,定制主题非常便捷。

不得不说,TDesign 的文档做得相当好,组件导航有图形化的缩略图,每一个组件的文档都分为「代码例子」、「api」和「设计指南」三部分,清晰明了,文档查阅体验很棒。圈内都说创业就找阿里的技术,腾讯的产品,真不是盖的。

tdesign 组件文档

中后台框架 TDesign Starter

在前端开发工作中,UI 组件库很大一部分用途就是用来做管理后台,也就是俗称的 admin 框架,TDesign 也出品了自己的中后台框架 TDesign Starter,命名也相当国际化。

tdesign 中后台框架

强大的主题定制、开箱即用的 CLI 工具以及适配手机屏幕,页面案例丰富,TDesign Starter 这套中后台系统完成度很高,无论是外在颜值还是内在代码,吊打很多 admin 框架。

tdesign 中后台框架

使用建议

虽然 TDesign 背靠大厂,且看上去完成度很高,非常不错,但作为新鲜出炉的、面向社会的开源项目,TDesign 还很年轻,目前上线的 Vue 2 版本组件库也还是 beta 版,在网上也看到一些反馈有性能问题的评论,如果你遇到问题没有足够的能力解决它,建议目前先将 TDesign 作为学习研究用,用在生产项目上还是等一等吧。

免费开源说明

TDesign 是腾讯官方出品的免费开源的企业级设计系统,UI 组件库的源代码基于 MIT 开源协议开放,任何个人和公司都可以免费使用,包括商业用途。

关注我,持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

TDesign - 腾讯出品的免费开源企业级设计体系,配套前端 UI 组件库同时支持 Vue 2 和 Vue 3|那些免费的砖

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码