Web（Vue）

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 is a password used to log in to IM. It is the ciphertext obtained after data such as UserID is encrypted.  
  // this method is only suitable for locally running a demo project and feature debugging. https://cloud.tencent.com/document/product/269/32688
  userSig: genTestUserSig({
    SDKAppID,
    secretKey,
    userID,  
  }).userSig,  
  useUploadPlugin: 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">Open OneToOne Chat</div>
        <div class="navbar-button" @click="openGroupChat">Open Group Chat</div>
      </div>
      <TUIChat v-show="!isH5 || currentConversationID">
        <h1>Let's chat!</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: "", // Please enter the userID you want to chat
      groupID: "", // Please enter the groupID you want to chat
    };
  },
  methods: {
    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,
  },
};