![\"TDesign](\"https://tdesign.gtimg.com/site/TDesign.png\")
\n \n\n \n \n \n
\n \n ![\"License\"](\"https://img.shields.io/npm/l/@tdesign/uniapp.svg?sanitize=true\")
\n \n \n ![\"Version\"](\"https://img.shields.io/npm/v/@tdesign/uniapp.svg?sanitize=true\")
\n \n \n ![\"Downloads\"](\"https://img.shields.io/npm/dm/@tdesign/uniapp\")
\n \n \n
![\"Ask](\"https://deepwiki.com/badge.svg\"){kind=icon}
\n \n
![](\"https://tdesign.gtimg.com/uniapp/example-qrcode.png\")
\n\n> 其他平台同样支持，仅因平台审核等原因未能上架预览，不影响组件库正常使用。\n\n## 安装\n\n### NPM 方式\n\n```bash\nnpm i @tdesign/uniapp\n```\n\n### UNI_MODULES 方式\n\n已上传 [插件](https://ext.dcloud.net.cn/plugin?name=tdesign-uniapp) 到 DCloud 插件市场，请打开插件详情页并点击`使用 HBuilderX 导入插件`。\n\n## 使用\n\n### 步骤一：引入样式文件\n\n在 `main.ts` 中引入组件库样式：\n\n#### CLI 模式\n\n```js\n// Less（推荐，rpx 单位，与 tdesign-miniprogram 完全一致）\nimport '@tdesign/uniapp/theme.less';\n\n// 或者引入编译后的 CSS 文件\nimport '@tdesign/uniapp/theme.css';\n```\n\n#### HBuilderX 模式\n\n```js\n// Less（推荐，rpx 单位，与 tdesign-miniprogram 完全一致）\nimport './uni_modules/tdesign-uniapp/components/theme.less';\n\n// 或者引入编译后的 CSS 文件\nimport './uni_modules/tdesign-uniapp/components/theme.css';\n```\n\n### 步骤二：注册组件\n\n#### 自动导入（推荐）\n\n配置 [easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom) 后，无需手动引入组件即可直接在模板中使用，在 `pages.json` 中添加以下配置：\n\n**CLI 模式**：使用 `node_modules` 下的 `@tdesign/uniapp` 时，配置如下。\n\n```json\n{\n \"easycom\": {\n \"custom\": {\n \"^t-(.*)\": \"@tdesign/uniapp/$1/$1.vue\"\n }\n }\n}\n```\n\n**HBuilderX 模式**：使用 `uni_modules` 下的 `tdesign-uniapp` 时，配置如下。\n\n```json\n{\n \"easycom\": {\n \"custom\": {\n \"^t-(.*)\": \"@/uni_modules/tdesign-uniapp/components/$1/$1.vue\"\n }\n }\n}\n```\n\n配置完成后，可以直接在模板中使用组件：\n\n```html\n\n ![\"Firefox\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Chrome\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"iOS](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Samsung\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Opera\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\")
](http://godban.github.io/browsers-support-badges/)![\"Android](\"https://user-images.githubusercontent.com/51158141/189169679-71e045f6-9b9b-4baf-8b9f-e045a40216f5.png\")
![](\"https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-h5.png\")
|\n| [TDesign UniApp Starter Apply](https://github.com/TDesignOteam/tdesign-uniapp-starter-apply/) | Vue3 + CLI 模式模板 - 活动报名 | ![](\"https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-apply-h5.png\")
|\n| [TDesign UniApp Starter Vue3 HX](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue3-hx/) | Vue3 + HBuilderX 模式模板 | ![](\"https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue3-hx-h5.png\")
|\n| [TDesign UniApp Starter Vue2 CLI](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue2-cli/) | Vue2 + CLI 模式模板 | ![](\"https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue2-cli-h5.png\")
|\n| [TDesign UniApp Starter Vue2 HX](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue2-hx/) | Vue2 + HBuilderX 模式模板 |![](\"https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue2-hx-h5.png\")
|\n## 反馈\n\n有任何问题，建议通过 [Github issues](https://github.com/Tencent/tdesign-miniprogram/issues) 反馈或扫码加入用户微信群。\n\n![](\"https://raw.githubusercontent.com/Tencent/tdesign/main/packages/site-components/src/images/groups/wx-group.png\")
\n\n## 开源协议\n\nTDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-miniprogram/blob/develop/LICENSE)。\n","readmeFilename":"README.md"}