效果展示
![](https://qcloudimg.tencent-cloud.cn/image/document/07affeb665d5714b24d70a1e00cce5fb.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a6ebe2187803e6acfaa874047274dca5.png)
开发环境要求
Vue ( 全面支持 Vue2 & Vue3 , 请您在下方接入时选择您所匹配的 Vue 版本接入指引进行接入)
TypeScript (如您是 js 项目, 请跳转至 进行配置 ts 渐进式支持)
sass(sass-loader 版本 ≤ 10.1.1)
node(node.js ≥ 16.0.0)
npm(版本请与 node 版本匹配)
步骤1:创建项目
支持使用 webpack 或 vite 创建项目工程,配置 Vue3 / Vue2 + TypeScript + sass。以下是几种项目工程搭建示例:
注意:
请您务必保证您的 @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 sass-loader@10.1.1
通过 vue-cli 创建项目,并选择下图中所选配置项。
vue create chat-example
请务必保证按照如下配置选择:
![](https://qcloudimg.tencent-cloud.cn/image/document/7d0e1a25c5459649ab477bd776ec6bda.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7d0e1a25c5459649ab477bd776ec6bda.png)
创建完成后,切换到项目所在目录:
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:下载 UI 组件
npm i @tencentcloud/chat-uikit-vuemkdir -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-vue
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-vue .\\src\\TUIKit /i /e /exclude:.\\node_modules\\@tencentcloud\\chat-uikit-vue\\excluded-list.txt
步骤3:引入 UI 组件
在需要展示的页面,引入 TUIKit 的组件即可使用。
例如:在 App.vue 页面中实现以下代码,即可快速搭建聊天界面(以下示例代码同时支持 Web 端与 H5 端):
注意:
以下示例代码使用了 setup 语法,如果您的项目没有使用 setup 语法,请按照 Vue3/Vue2 的标准方式注册组件。
<template><div id="app"><TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" /></div></template><script lang="ts" setup>import { TUIKit } from './TUIKit';</script><style lang="scss"></style>
<template><div id="app"><TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" /></div></template><script lang="ts" setup>import { TUIKit } from './TUIKit';</script><style lang="scss"></style>
<template><div id="app"><TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" /></div></template><script lang="ts" setup>import { TUIKit } from './TUIKit';</script><style lang="scss"></style>
1. 安装支持 composition-api 以及 script setup 的相关依赖,以及 vue2.6 相关依赖。
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
2. 在
main.ts/mian.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";
步骤4: 获取 SDKAppID 、userID 、 userSig
设置
App.vue
中 TUIKit 组件的 props 属性 SDKAppID、userID、userSig 。SDKAppID 信息,可通过 即时通信 IM 控制台 获取:
![](https://qcloudimg.tencent-cloud.cn/image/document/7ea7f61abbbc123e10ec657f41afee3b.png)
userID 信息,可通过单击 即时通信 IM 控制台 -【账号管理】,切换至目标应用所在账号,即可创建账号并获取 userID。
![](https://qcloudimg.tencent-cloud.cn/image/document/b4a74282e6321b860c0e3ad53c909b7b.png)
userSig 信息,可单击 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验,填写创建的 userID,即可生成 userSig。
![](https://qcloudimg.tencent-cloud.cn/image/document/c040e1becae03b8419e718c164f3c7b1.png)
步骤5:启动项目
执行以下命令启动项目:
说明:
由于 vue-cli 默认开启 webpack 全局 overlay 报错信息提示,为了您有更好的体验,建议您关闭全局 overlay 报错提示。
module.exports = defineConfig({devServer: {client: {overlay: false,},},});
module.exports = {devServer: {overlay: false,},};
npm run serve
npm run dev
步骤6:发起您的第一条客服咨询
通过 TUIContact 的客服号,发起您的第一条客服咨询。
![](https://qcloudimg.tencent-cloud.cn/image/document/ae2c50773f26f299d2aa9fc35dfa7bd3.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/9de46667c4a6c1180db00a6b675bf494.png)
独立集成客服会话
在需要展示的页面,引入 TUIChat 的组件即可使用。
例如:在 App.vue 页面中实现以下代码,即可快速搭建聊天界面并开启指定会话:
注意:
生成 conversationID 所需要的 userID 为 客服虚拟号 ID。
![](https://qcloudimg.tencent-cloud.cn/image/document/9850251f02fec7d8ffb0e62195604bde.png)
<template><div id="app"><TUIKit:SDKAppID="YOUR_SDKAppID"userID="YOUR_USERID"userSig="YOUR_USERSIG"conversationID="C2C@customer_service_account"><TUIChat><h1>Welcome to Tencent Cloud Chat</h1></TUIChat></TUIKit></div></template><script lang="ts" setup>import { TUIKit, TUIChat } from "./TUIKit";</script><style lang="scss"></style>
![](https://qcloudimg.tencent-cloud.cn/image/document/eb18628024668e5ef5c9b824f4917a15.png)
. ![](https://qcloudimg.tencent-cloud.cn/image/document/71ca4b3a07f3c00276fca8820589f513.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/eb18628024668e5ef5c9b824f4917a15.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/71ca4b3a07f3c00276fca8820589f513.png)