介绍

内部打磨一年有余后，近日，团队发布了 TDesign 面向移动端的组件库 Vue-Next For Moible 的 Alpha。

TDesign Vue-Next For Moible 旨在满足 H5 场景下的前端页面开发需求，同时，产品保持了与 TDesign 小程序端 高度一致的设计语言 和 API，统一的 API 不仅在开发上能让开发者在多端开发中更加适应，也可以通过 API 自动生成单元测试用例。

欢迎体验

官网：tdesign.tencent.com/mobile-vue/…

GitHub 仓库 GitHub - Tencent/tdesign-mobile-vue: A Vue3.x Mobile UI components lib for TDesign

特性

• 基于 TDesign API 体系高度统一的实现，切换框架兼容性强

• 基于 TDesign 的设计体系下首批输出 30+个基础组件

• 基于 Vue3, 使用 TypeScript 编写，提供完整的类型定义

• 支持 Vue3 的独立的 Icon 库引入 tdesign-icons-vue-next

• 充分使用 VueUse 库的逻辑封装

• 支持按需引入和 Tree Shaking

• 支持服务端渲染

当前版本

alpha 0.8.0 版更新内容如下：

• dropdown-menu: 移除冗余的 dom 结构

• search: 修复样式丢失问题

• input：修复输入框样式丢失问题

• grid： 修复 grid-item 样式丢失问题

• 新增 pull-down-refresh 组件

详情见：github.com/Tencent/tde…

快速上手

安装

npm i tdesign-mobile-vue

使用方式

推荐使用 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：

import { createApp } from 'vue'; import { Button } from 'tdesign-mobile-vue'; const app = createApp(App); app.use(Button);

浏览器兼容性

Edge >= 12；Firefox >= 18；Chrome >= 49；Safari >= 10

后续计划(Q2)

• 无障碍访问：正在进行中

• 暗黑模式

• 国际化和语言包

• 丰富的行业组件

欢迎你使用，Star，并且通过 GitHub ISSUE 与我们交流，也期待你能通过开源协同的方式，参与 我们的共建。

了解如何参与 TDesign 的共建：tdesign.tencent.com/about/contr…

TDesign 团队会及时在企业微信大群中同步发布版本、问题修复信息，也会有一些关于组件库建设的讨论，欢迎微信或企业微信扫码入群交流：