介绍
内部打磨一年有余后,近日,团队发布了 TDesign 面向移动端的组件库 Vue-Next For Mobile 的 Alpha 版。
TDesign Vue-Next For Mobile 旨在满足 H5 场景下的前端页面开发需求,同时,产品保持了与 TDesign 小程序端 高度一致的设计语言 和 API,统一的 API 不仅在开发上能让开发者在多端开发中更加适应,也可以通过 API 自动生成单元测试用例。
欢迎体验
官网:https://tdesign.tencent.com/mobile-vue/overview
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 组件
详情见:https://github.com/Tencent/tdesign-mobile-vue/releases/
快速上手
安装
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 的共建:https://tdesign.tencent.com/about/contributing
TDesign 团队会及时在企业微信大群中同步发布版本、问题修复信息,也会有一些关于组件库建设的讨论,欢迎微信或企业微信扫码入群交流: