npm install -g @vue/cli@5.0.8 sass sass-loader@10.1.1
vue create chat-example
cd chat-example
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
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
main.ts / main.js
中,引入 TUIKit,并注册到 Vue 项目实例中import { createApp } from 'vue';import App from './App.vue';import { TUIComponents, TUIChatKit, genTestUserSig } from "./TUIKit";import { TUILogin } from "@tencentcloud/tui-core"; const app = createApp(App);const SDKAppID = 0; // Your SDKAppIDconst secretKey = ""; //Your secretKeyconst userID = ""; // User ID// TUIChatKit add TUIComponentsTUIChatKit.components(TUIComponents, app);// TUIChatKit initTUIChatKit.init();// TUICore loginTUILogin.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://www.tencentcloud.com/document/product/269/32688?from_cn_redirect=1userSig: genTestUserSig({SDKAppID,secretKey,userID,}).userSig,useUploadPlugin: true,useProfanityFilterPlugin: false,framework: "vue3",});app.mount("#app");export { SDKAppID, secretKey };
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 SDKAppIDconst secretKey = ""; //Your secretKeyconst userID = ""; // User ID// TUIChatKit add TUIComponentsTUIChatKit.components(TUIComponents, Vue);// TUIChatKit initTUIChatKit.init();// TUICore loginTUILogin.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://www.tencentcloud.com/document/product/269/32688?from_cn_redirect=1userSig: genTestUserSig({SDKAppID,secretKey,userID,}).userSig,useUploadPlugin: true,// 本地审核可识别、处理不安全、不适宜的内容,为您的产品体验和业务安全保驾护航// 此功能为增值服务,请参考:https://www.tencentcloud.com/document/product/269/79139?from_cn_redirect=1// 如果您已购买内容审核服务,开启此功能请设置为 trueuseProfanityFilterPlugin: 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 v-if="!(isH5 && currentConversationID)" class="TUIKit-navbar"><divv-for="item of navbarList":key="item.id":class="['TUIKit-navbar-item', currentNavbar === item.id && 'TUIKit-navbar-item-active']"@click="currentNavbar = item.id">{{ item.label }}</div></div><div class="TUIKit-main-container"><div v-if="currentNavbar === 'conversation'" class="TUIKit-main"><div v-if="!(isH5 && currentConversationID)" class="TUIKit-main-aside"><TUISearch searchType="global"></TUISearch><TUIConversation></TUIConversation></div><div v-if="!isH5 || currentConversationID" class="TUIKit-main-main"><TUIChat><h1>Welcome Chat</h1></TUIChat><TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" /><TUISearch :class="isH5 ? 'chat-popup' : 'chat-aside'" searchType="conversation" /></div><TUIGroup v-if="isH5 && !currentConversationID" class="chat-popup" /><TUIContact displayType="selectFriend" /></div><div v-else-if="currentNavbar === 'contact'" class="TUIKit-main"><TUIContactdisplayType="contactList"@switchConversation="currentNavbar = 'conversation'"/></div><TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" /></div></div></template><script setup lang="ts">import { ref } from "vue";import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";import { TUICallKit } from "@tencentcloud/call-uikit-vue";import { TUISearch, TUIConversation, TUIChat, TUIContact, TUIGroup } from "./TUIKit";import { isH5 } from "./TUIKit/utils/env";const currentConversationID = ref<string>("");const currentNavbar = ref<string>("conversation");const navbarList = [{id: "conversation",label: "Conversation",},{id: "contact",label: "Contact",},];TUIStore.watch(StoreName.CONV, {currentConversationID: (id: string) => {currentConversationID.value = id;},});</script><style scoped lang="scss">@import "./TUIKit/assets/styles/common.scss";@import "./TUIKit/assets/styles/sample.scss";</style>
<template><div :class="['TUIKit', isH5 && 'TUIKit-h5']"><div v-if="!(isH5 && currentConversationID)" class="TUIKit-navbar"><divv-for="item of navbarList":key="item.id":class="['TUIKit-navbar-item', currentNavbar === item.id && 'TUIKit-navbar-item-active']"@click="currentNavbar = item.id">{{ item.label }}</div></div><div class="TUIKit-main-container"><div v-if="currentNavbar === 'conversation'" class="TUIKit-main"><div v-if="!(isH5 && currentConversationID)" class="TUIKit-main-aside"><TUISearch searchType="global"></TUISearch><TUIConversation></TUIConversation></div><div v-if="!isH5 || currentConversationID" class="TUIKit-main-main"><TUIChat><h1>Let's Chat!</h1></TUIChat><TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" /><TUISearch :class="isH5 ? 'chat-popup' : 'chat-aside'" searchType="conversation" /></div><TUIGroup v-if="isH5 && !currentConversationID" class="chat-popup" /><TUIContact displayType="selectFriend" /></div><div v-else-if="currentNavbar === 'contact'" class="TUIKit-main"><TUIContactdisplayType="contactList"@switchConversation="currentNavbar = 'conversation'"/></div><TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" /></div></div></template><script lang="ts">import Vue from "vue";import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";import { TUICallKit } from "@tencentcloud/call-uikit-vue2";import { TUISearch, TUIConversation, TUIChat, TUIContact, TUIGroup } from "./TUIKit";import { isH5 } from "./TUIKit/utils/env";export default Vue.extend({name: "App",components: {TUISearch,TUIGroup,TUIConversation,TUIChat,TUIContact,TUICallKit,},data() {return {isH5: isH5,currentConversationID: "",currentNavbar: "conversation",navbarList: [{id: "conversation",label: "Conversation",},{id: "contact",label: ",},],};},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";</style>
npm i @vue/composition-api unplugin-vue2-script-setup vue@2.6.14 vue-template-compiler@2.6.14
import VueCompositionAPI from "@vue/composition-api";Vue.use(VueCompositionAPI);
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");},};
// 初始写法export * from "vue";// 替换为export * from "@vue/composition-api";
<template><div :class="['TUIKit', isH5 && 'TUIKit-h5']"><div v-if="!(isH5 && currentConversationID)" class="TUIKit-navbar"><divv-for="item of navbarList":key="item.id":class="['TUIKit-navbar-item', currentNavbar === item.id && 'TUIKit-navbar-item-active']"@click="currentNavbar = item.id">{{ item.label }}</div></div><div class="TUIKit-main-container"><div v-if="currentNavbar === 'conversation'" class="TUIKit-main"><div v-if="!(isH5 && currentConversationID)" class="TUIKit-main-aside"><TUISearch searchType="global"></TUISearch><TUIConversation></TUIConversation></div><div v-if="!isH5 || currentConversationID" class="TUIKit-main-main"><TUIChat><h1>Let's Chat!</h1></TUIChat><TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" /><TUISearch :class="isH5 ? 'chat-popup' : 'chat-aside'" searchType="conversation" /></div><TUIGroup v-if="isH5 && !currentConversationID" class="chat-popup" /><TUIContact displayType="selectFriend" /></div><div v-else-if="currentNavbar === 'contact'" class="TUIKit-main"><TUIContactdisplayType="contactList"@switchConversation="currentNavbar = 'conversation'"/></div><TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" /></div></div></template><script lang="ts">import Vue from "vue";import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";import { TUICallKit } from "@tencentcloud/call-uikit-vue2.6";import { TUISearch, TUIConversation, TUIChat, TUIContact, TUIGroup } from "./TUIKit";import { isH5 } from "./TUIKit/utils/env";export default Vue.extend({name: "App",components: {TUISearch,TUIGroup,TUIConversation,TUIChat,TUIContact,TUICallKit,},data() {return {isH5: isH5,currentConversationID: "",currentNavbar: "conversation",navbarList: [{id: "conversation",label: "Conversation",},{id: "contact",label: "Contact",},],};},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";</style>
npm run serve
npm run dev
Vue TUIKit
默认自带 简体中文、英语 语言包,作为界面展示语言。import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";// change language to chineseTUITranslateService.changeLanguage("zh");// change language to englishTUITranslateService.changeLanguage("en");
vue add typescript
npm install -D typescript
npm install -g @vue/cli@5.0.8
npm i -D sass sass-loader@10.1.1
# .eslintignoresrc/TUIKit
module.exports = defineConfig({...devServer: {client: {overlay: false,},},});
module.exports = {...devServer: {overlay: false,},};
module.exports = {...rules: {...'vue/multi-word-component-names': 'warn',},};
npm install --legacy-peer-deps
// 如果您是 vue2.7 项目,请在您项目根目录执行npm i vue@2.7.9 vue-template-compiler@2.7.9// 如果您是 vue2.6 项目,请在您项目根目录执行npm i vue@2.6.14 vue-template-compiler@2.6.14
本页内容是否解决了您的问题?