Web

npm create vite@latest

cd chat-example
npm install

npm i -D sass sass-loader

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

import Vue from "vue";
import App from "./App.vue";
import { TUIComponents, TUIChatKit, genTestUserSig } from "./TUIKit";
import { TUILogin } from "@tencentcloud/tui-core";

const SDKAppID = 0; // Your SDKAppID
const secretKey = ""; //Your secretKey
const userID = ""; // User ID

// TUIChatKit add TUIComponents
TUIChatKit.components(TUIComponents, Vue);
// TUIChatKit init
TUIChatKit.init();
// TUICore login
TUILogin.login({  
  SDKAppID,
  userID,
  // UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。  
  // 该方法仅适合本地跑通 Demo 和功能调试，详情请参见 https://cloud.tencent.com/document/product/269/32688 
  userSig: genTestUserSig({
    SDKAppID,
    secretKey,
    userID,  
  }).userSig,  
  // 如果您需要发送图片、语音、视频、文件等富媒体消息，请设置为 true  
  useUploadPlugin: true,  
  // 本地审核可识别、处理不安全、不适宜的内容，为您的产品体验和业务安全保驾护航  
  // 此功能为增值服务，请参考：https://cloud.tencent.com/document/product/269/79139  
  // 如果您已购买内容审核服务，开启此功能请设置为 true  
  useProfanityFilterPlugin: false,  
  framework: "vue2",
});
Vue.config.productionTip = false;
  new Vue({  
    render: (h) => h(App),
  }).$mount("#app");
export { SDKAppID, secretKey };

<template>
  <div :class="['TUIKit', isH5 && 'TUIKit-h5']">
    <div class="TUIKit-main-container">
      <div
        v-show="!isH5 || !currentConversationID"
        :class="['navbar', isH5 && 'navbar-h5']"
      >
        <div class="navbar-button" @click="openChat">打开 1v1 聊天</div>
        <div class="navbar-button" @click="openGroupChat">打开群聊</div>
      </div>
      <TUIChat v-show="!isH5 || currentConversationID">
        <h1>欢迎使用腾讯云即时通信 IM </h1>
      </TUIChat>
      <TUICallKit
        class="callkit-container"
        :allowedMinimized="true"
        :allowedFullScreen="false"
      />
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { TUIStore, StoreName, TUIConversationService } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue2";
import { TUIChat } from "./TUIKit";
import { isH5 } from "./TUIKit/utils/env";
export default Vue.extend({
  name: "App",
  components: {
    TUIChat,
    TUICallKit,
  },
  data() {
    return {
      isH5: isH5,
      currentConversationID: "",
      currentNavbar: "conversation",
      userID: "", // 请填写对端 userID
      groupID: "", // 请填写会话 groupID
    };
  },
  methods: {
    // 打开 1v1 聊天
    openChat() {
      // 切换会话进入聊天
      TUIConversationService.switchConversation(`C2C${this.userID}`);
    },
    // 打开群聊
    openGroupChat() {
      TUIConversationService.switchConversation(`GROUP${this.groupID}`);
    },
  },
  mounted: function () {
    TUIStore.watch(StoreName.CONV, {
      currentConversationID: (id: string) => {
        this.currentConversationID = id;
      },
    });
  },
});
</script>
<style scoped lang="scss">
@import "./TUIKit/assets/styles/common.scss";
@import "./TUIKit/assets/styles/sample.scss";
.navbar {
  box-sizing: border-box;
  min-width: 285px;
  flex: 0 0 24%;
  border-right: 1px solid #f4f5f9;
  padding: 20px;
  .navbar-button {
    padding: 10px 40px;
    background-color: #006eff;
    color: #ffffff;
    font-size: 16px;
    margin-top: 65px;
    border-radius: 30px;
    text-align: center;
    cursor: pointer;
  }
}
.navbar-h5 {
  flex: 1;
  border-right: 1px solid #f4f5f9;
  .navbar-button {
    cursor: none;
  }
}
.chat {
  flex: 1;
}
</style>

npm run dev

npm install -D typescript

module.exports = {
  ...
  devServer: {
    overlay: false,
  },
};