Web(vue2/vue3)

最近更新时间:2024-08-29 10:24:11

我的收藏

效果展示




开发环境要求

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
vite
注意:
请您务必保证您的 @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
请务必保证按照如下配置选择:



创建完成后,切换到项目所在目录:
cd chat-example
如果您是 vue2 项目,请根据您所使用的 Vue 版本进行以下相应的环境配置, vue3 项目请忽略。
vue2.7
vue2.6及以下
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
注意:
Vite 需要 Node.js 版本 18+,20+。当您的包管理器发出警告时,请注意升级您的 Node 版本,详情请参考 vite 官网
使用 vite 方式创建项目,按照下图选项配置 Vue + TypeScript 。
npm create vite@latest



之后切换到项目目录,安装项目依赖:
cd chat-example
npm install
安装 TUIKit 所需 sass 环境依赖:
npm i -D sass sass-loader

步骤2:下载 UI 组件

通过 npm 方式下载 UI组件,为了方便您后续的拓展,建议您将 UI 组件复制到自己工程的 src 目录下:
macOS 端
Windows 端
npm i @tencentcloud/chat-uikit-vue
mkdir -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 的标准方式注册组件。
vue3
vue2.7
vue2.6及以下
<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 plugin
configureWebpack: {
plugins: [
ScriptSetup({
/* options */
}),
],
},
chainWebpack(config) {
// disable type check and let `vue-tsc` handles it
config.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 控制台 获取:

userID 信息,可通过单击 即时通信 IM 控制台 -【账号管理】,切换至目标应用所在账号,即可创建账号并获取 userID。

userSig 信息,可单击 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验,填写创建的 userID,即可生成 userSig。


步骤5:启动项目

执行以下命令启动项目:
vue-cli
vite
说明:
由于 vue-cli 默认开启 webpack 全局 overlay 报错信息提示,为了您有更好的体验,建议您关闭全局 overlay 报错提示
webpack4
webpack3
module.exports = defineConfig({
devServer: {
client: {
overlay: false,
},
},
});
module.exports = {
devServer: {
overlay: false,
},
};
npm run serve
npm run dev

步骤6:发起您的第一条客服咨询

通过 TUIContact 的客服号,发起您的第一条客服咨询。



独立集成客服会话

在需要展示的页面,引入 TUIChat 的组件即可使用。
例如:在 App.vue 页面中实现以下代码,即可快速搭建聊天界面并开启指定会话:
注意:
生成 conversationID 所需要的 userID 为 客服虚拟号 ID。

<template>
<div id="app">
<TUIKit
:style="{ width: '500px', height: '800px', margin: '0 auto', boxShadow: '0 11px 20px #ccc' }"
: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>


.



技术咨询

点此进入IM社群,享有专业工程师的支持,解决您的难题。