> 其他平台同样支持，仅因平台审核等原因未能上架预览，不影响组件库正常使用。
## 安装
### NPM 方式
```bash
npm i @tdesign/uniapp-chat
```
### UNI_MODULES 方式
已上传 [插件](https://ext.dcloud.net.cn/plugin?name=tdesign-uniapp-chat) 到 DCloud 插件市场，请打开插件详情页并点击`使用 HBuilderX 导入插件`。
## 使用
> `@tdesign/uniapp-chat` 依赖 `@tdesign/uniapp`，请确保项目中已安装 `@tdesign/uniapp`。
### 步骤一：引入样式文件
在 `main.ts` 中引入组件库样式：
#### CLI 模式
```js
// Less（推荐，rpx 单位，与 tdesign-miniprogram 完全一致）
import '@tdesign/uniapp/theme.less';
// 或者引入编译后的 CSS 文件
import '@tdesign/uniapp/theme.css';
```
#### HBuilderX 模式
```js
// Less（推荐，rpx 单位，与 tdesign-miniprogram 完全一致）
import './uni_modules/tdesign-uniapp/components/theme.less';
// 或者引入编译后的 CSS 文件
import './uni_modules/tdesign-uniapp/components/theme.css';
```
### 步骤二：注册组件
#### 自动导入（推荐）
配置 [easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom) 后，无需手动引入组件即可直接在模板中使用，在 `pages.json` 中添加以下配置：
**CLI 模式**：使用 `node_modules` 下的 `@tdesign/uniapp-chat` 时，配置如下。
```json
{
"easycom": {
"custom": {
"^t-chat-(.*)": "@tdesign/uniapp-chat/chat-$1/chat-$1.vue",
"^t-attachments": "@tdesign/uniapp-chat/attachments/attachments.vue",
"^t-(.*)": "@tdesign/uniapp/$1/$1.vue"
}
}
}
```
**HBuilderX 模式**：使用 `uni_modules` 下的 `tdesign-uniapp-chat` 时，配置如下。
```json
{
"easycom": {
"custom": {
"^t-chat-(.*)": "@/uni_modules/tdesign-uniapp-chat/components/chat-$1/chat-$1.vue",
"^t-attachments": "@/uni_modules/tdesign-uniapp-chat/components/attachments/attachments.vue",
"^t-(.*)": "@/uni_modules/tdesign-uniapp/components/$1/$1.vue"
}
}
}
```
配置完成后，可以直接在模板中使用组件：
```html
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
## 开源协议
TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-miniprogram/tree/develop/LICENSE)。