tencent cloud

文档反馈

Web(Vue)

最后更新时间:2024-08-07 15:09:12

    适用场景

    Web & H5 平台,独立集成私信聊天(1V1)或者群聊(Group),如房产中介咨询、电商在线客服、保险远程定损等。
    

    开发环境要求

    Vue ( 全面支持 Vue2 & Vue3 , 请您在下方接入时选择您所匹配的 Vue 版本接入指引进行接入)
    TypeScript ( 如您是 js 项目, 请跳转至 js 工程如何接入 TUIKit 组件进行配置 ts 渐进式支持)
    sass(sass-loader 版本 ≤ 10.1.1)
    node(node.js ≥ 16.0.0)
    npm(版本请与 node 版本匹配)

    集成指引

    请按照 集成 TUIKit 的步骤进行操作,操作完成后,您需要按找以下步骤配置 TUIChat。

    集成 <TUIChat>

    在需要展示的页面,引入 TUIChat 的组件即可使用。
    例如:在 App.vue 页面中实现以下代码,即可快速搭建聊天界面并开启指定会话:
    说明:
    conversationID:会话 ID。会话ID组成方式如下:
    C2C${userID}(单聊),比如 C2C123456
    GROUP${groupID}(群聊), 比如 GROUP123456
    <template>
    <div id="app">
    <TUIKit
    :SDKAppID="0"
    userID="YOUR_USERID"
    userSig="YOUR_USERSIG"
    conversationID="YOUR_CONVERSATIONID"
    :style="{ width: '500px', height: '800px', margin: '0 auto', boxShadow: '0 11px 20px #ccc' }"
    >
    <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>

    启动项目

    执行以下命令启动项目:
    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

    常见问题

    请单击 常见问题 查看解决方案。

    相关文档

    Vue2 & Vue3 UIKit 相关:

    Vue2 & Vue3 UIKit 逻辑层: engine 相关

    交流与反馈

    加入Telegram 技术交流群组WhatsApp 交流群,享有专业工程师的支持,解决您的难题。
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持