产品动态
公告
Vue
TUIKit 是基于腾讯云 IM SDK 的一款 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、关系链、群组、音视频通话等功能。基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
TUIKit 中的组件在实现 UI 功能的同时，会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理，因而开发者在使用 TUIKit 时只需关注自身业务或个性化扩展即可。
前提条件
开通服务
1. 登录 Chat 并创建应用。单击
Create Application，在对话框中输入您的 Application name，选择 Product、Region，单击Create来创建应用。
2. 创建完成后，可在控制台总览页查看新建应用的
SDKAppID、SecretKey，后续运行 Demo 时需要用到这两个信息。
3. 创建 2～3 个预设账号用于体验单聊能力和群聊能力。
4. 通过 UserSign Tools 获取 UserSig 信息，用于登录账号。
环境准备
Vue ( 全面支持 Vue2 & Vue3 ， 请您在下方接入时选择您所匹配的 Vue 版本接入指引进行接入)
TypeScript （ 如您是 JS 项目， 请跳转至 js 工程如何接入 TUIKit 组件? 进行配置 TS 渐进式支持）
Sass（sass-loader 版本 ≤ 10.1.1）
Node（node.js ≥ 18.0.0）
npm（版本请与 node 版本匹配）
接入步骤
步骤 1：创建项目
TUIKit 支持使用 Vite 或 vue-cli 创建项目工程，配置 Vue3 / Vue2 + TypeScript + Sass。以下是几种项目工程搭建示例：
使用 Vite 方式创建项目，按照下图选项配置 Vue + TypeScript 。
npm create vite@5
之后切换到项目目录，安装项目依赖：
cd chat-examplenpm install
安装 TUIKit 所需 sass 环境依赖：
npm i -D sass@1.77.0 sass-loader@10.1.1
在根目录文件
tsconfig.app.json 下增加以下编译规则：{..."compilerOptions": {..."verbatimModuleSyntax": false,}}
{..."compilerOptions": {..."importsNotUsedAsValues": "preserve",}}
说明：
如果
tsconfig.json 使用了 references，规则需写到被引用的文件（如 ./tsconfig.app.json ），否则写在 tsconfig.json 中不生效。需要将规则添加至实际的references对应的文件中，以下是具体示例：错误写法 | 正确写法 |
当 tsconfig.json 文件中已有 references 相关配置时，直接在 tsconfig.json 中声明以下规则无效 | 当 tsconfig.json 文件中已有 references 相关配置时，需要在对应的 references 内部文件中声明以下规则。下文中是在 references 中配置的根目录 tsconfig.app.json 文件中配置以下规则。 |
 |  |
注意：
请您务必保证您的 @vue/cli 版本在 5.0.0 以上，您可使用以下示例代码升级您的 @vue/cli 版本至 v5.0.8。
使用 vue-cli 方式创建项目， 配置 Vue2 / Vue3 + TypeScript + sass。
如果您尚未安装 vue-cli 或者 vue-cli 版本低于 5.0.0 ，可以在 terminal 或 cmd 中采用如下方式进行安装：
npm install -g @vue/cli@5.0.8 sass@1.77.0 sass-loader@10.1.1
通过 vue-cli 创建项目，并选择下图中所选配置项。
vue create chat-example
请务必保证按照如下配置选择：
创建完成后，切换到项目所在目录：
cd chat-example
如果您是 vue2 项目，请根据您所使用的 Vue 版本进行以下相应的环境配置， vue3 项目请忽略。
npm i vue@2.7.9 vue-template-compiler@2.7.9
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
步骤 2：下载 TUIKit 组件
npm i @tencentcloud/chat-uikit-vue@3mkdir -p ./src/TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-vue/ ./src/TUIKit
npm i @tencentcloud/chat-uikit-vue3
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-vue .\\src\\TUIKit /i /e /exclude:.\\node_modules\\@tencentcloud\\chat-uikit-vue\\excluded-list.txt
步骤 3：引入 TUIKit 组件
在需要展示的页面，引入 TUIKit 的组件即可使用。
说明：
为尊重表情设计版权，Chat Demo/TUIKit 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有，您可以通过升级至 Chat 专业版 Plus 和企业版 免费使用该表情包。
例如：在 App.vue 页面中实现以下代码，即可快速搭建聊天界面（以下示例代码同时支持 Web 端与 H5 端）：
注意：
以下示例代码使用了 setup 语法，如果您的项目没有使用 setup 语法，请按照 Vue3/Vue2 的标准方式注册组件。
<template><div id="app"><TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" /><TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" /></div></template><script lang="ts" setup>import { TUIKit } from './TUIKit';import { TUICallKit } from '@trtc/calls-uikit-vue';</script><style lang="scss"></style>
如果是 vite 创建的项目，您可以注释默认工程中的无效样式，您可以视情况删除无用的内容。
#app {/* max-width: 1280px; */margin: 0 auto;/* padding: 2rem; */text-align: center;}
<template><div id="app"><TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" /><TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" /></div></template><script lang="ts" setup>import { TUIKit } from './TUIKit';import { TUICallKit } from '@trtc/calls-uikit-vue2';</script><style lang="scss"></style>
如果是 vite 创建的项目，您可以注释默认工程中的无效样式，您可以视情况删除无用的内容。
#app {/* max-width: 1280px; */margin: 0 auto;/* padding: 2rem; */text-align: center;}
<template><div id="app"><TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" /><TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" /></div></template><script lang="ts" setup>import { TUIKit } from './TUIKit';import { TUICallKit } from '@trtc/calls-uikit-vue2.6';</script><style lang="scss"></style>
1. 安装支持 composition-api 以及 script setup 的相关依赖，以及 Vue 2.6 相关依赖。
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
2. 在
main.ts/main.js 中引入 VueCompositionAPI。import VueCompositionAPI from "@vue/composition-api";Vue.use(VueCompositionAPI);
3. 在
vue.config.js 中增加配置，若没有该文件请新建。const ScriptSetup = require("unplugin-vue2-script-setup/webpack").default;module.exports = {parallel: false, // disable thread-loader, which is not compactible with this pluginconfigureWebpack: {plugins: [ScriptSetup({/* options */}),],},chainWebpack(config) {// disable type check and let `vue-tsc` handles itconfig.plugins.delete("fork-ts-checker");},};
4. 在
src/TUIKit/adapter-vue.ts 文件最后, 替换导出源：// 初始写法export * from "vue";// 替换为export * from "@vue/composition-api";
如果是 Vite 创建的项目，您可以注释默认工程中的无效样式，您可以视情况删除无用的内容。
#app {/* max-width: 1280px; */margin: 0 auto;/* padding: 2rem; */text-align: center;}
步骤 4：配置鉴权信息
设置
App.vue 中 TUIKit 组件的 props 属性 SDKAppID、userID、userSig。注意
UserSig 是用户登录即时通信 Chat 的密码，其本质是对 UserID 等信息加密后得到的密文。
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。
本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试。更多详情请参见 服务端生成 UserSig。
<TUIKit:SDKAppID="0" // numberuserID="xxx" // stringuserSig="xxx" // string/>
步骤 5：启动项目
执行以下命令启动项目：
npm run dev
说明：
由于 vue-cli 默认开启 webpack 全局 overlay 报错信息提示，为了您有更好的体验，建议您在 vue.config.js 或其他您的工程中的 webpack 配置文件中关闭全局 overlay 报错提示。
module.exports = defineConfig({...// 新增关闭 overlay 配置代码devServer: {client: {overlay: false,},},});
module.exports = {...// 新增关闭 overlay 配置代码devServer: {overlay: false,},};
npm run serve
体验基础功能
发送您的第一条消息
1. 项目启动之后单击左上角发起单聊。
2. 进入发起单聊弹窗。在搜索栏输入 步骤4 中创建的 userID，选中后单击完成。
3. 在输入框中输入消息并单击发送。
Web 端 “发送您的第一条消息” 具体步骤示例：
H5 端 “发送您的第一条消息” 具体步骤示例：
拨打您的第一通电话
附加项：切换语言
Web & H5 端
Vue TUIKit 默认自带 简体中文、英语 语言包，作为界面展示语言。import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";// change language to chineseTUITranslateService.changeLanguage("zh");// change language to englishTUITranslateService.changeLanguage("en");
常见问题
产品服务类
1. 音视频通话能力包未开通？音视频通话发起失败？
接入报错类
运行时报错："TypeError: Cannot read properties of undefined (reading "getFriendList")"
若按照上述步骤接入后，运行时出现以下错误，请您务必删除 TUIKit 目录下的 node_modules 目录，以保证 TUIKit 的依赖唯一性，避免 TUIKit 多份依赖造成问题。
js 工程如何接入 TUIKit 组件
TUIKit 仅支持 ts 环境运行，您可以通过渐进式配置 typescript 来使您项目中已有的 js 代码 与 TUIKit 中 ts 代码共存。
请在您 vue-cli 脚手架创建的工程根目录执行：
vue add typescript
之后按照如下配置项进行选择（为了保证能同时支持原有 js 代码 与 TUIKit 中 ts 代码，请您务必严格按照以下五个选项进行配置）
完成以上步骤后，请重新运行项目
请在您 vite 创建的工程根目录执行：
npm install -D typescript
运行时报错：/chat-example/src/TUIKit/components/TUIChat /message-input/message-input-editor.vue .ts（8，23）TS1005: expected.
出现以上报错信息，是因为您安装的 @vue/cli 版本过低导致，请您务必保证您的 @vue/cli 版本在 5.0.0 及以上。升级方式如下：
npm install -g @vue/cli@5.0.8
运行时报错: Failed to resolve loader: sass-loader
出现以上报错信息，是因为您未安装
sass 环境导致，请执行以下命令进行安装:npm i -D sass sass-loader@10.1.1
运行时报错：ESLint 报错
若 chat-uikit-vue 拷贝到 src 目录汇总与您本地项目代码风格不一致导致报错，可将本组件目录屏蔽，如在项目根目录增加 .eslintignore 文件：
# .eslintignoresrc/TUIKit
运行时报错：vue/cli dev 模式下 webpack 全屏 overlay error 报错信息提示
可以在您项目根目录的 vue.config.js 中进行关闭：
module.exports = defineConfig({...devServer: {client: {overlay: false,},},});
module.exports = {...devServer: {overlay: false,},};
运行时报错：Component name "XXXX" should always be multi-word
Chat TUIKit web 所使用的 ESLint 版本为 v6.7.2 ，对于模块名的驼峰式格式并不进行严格校验。
如果您出现此问题，您可以在 .eslintrc.js 文件中进行如下配置：
module.exports = {...rules: {...'vue/multi-word-component-names': 'warn',},};
运行时报错：RESOLVE unable to resolve dependency tree
npm install 的时候如果出现 ERESOLVE unable to resolve dependency tree ，表示依赖安装冲突，可采用以下方式进行安装：
npm install --legacy-peer-deps
运行时报错：vue packages version mismatch
// 如果您是 vue2.7 项目，请在您项目根目录执行npm i vue@2.7.9 vue-template-compiler@2.7.9// 如果您是 vue2.6 项目，请在您项目根目录执行npm i vue@2.6.14 vue-template-compiler@2.6.14
编译时报错：vite 项目 npm run build 之后 typescript 类型检查报错
原因：package.json script 下 "build": "vue-tsc && vite build" 中的 vue-tsc 命令导致。
解决方案: 删除 vue-tsc 即可。 "build": "vite build"
交流与反馈
相关文档
Vue2 & Vue3 UIKit
Vue2 & Vue3 逻辑层
文档反馈