Vue3

最近更新时间:2025-11-14 10:28:21

我的收藏
本文介绍如何快速跑通 IM Demo 来体验文字、语音、视频等消息发送功能。
推荐使用更高效的 AI 集成助手
我们为您提供了全新的 AI 集成方式,如果您不需要完整的 Demo 工程, 只想快速开始集成,推荐您使用更高效的 AI 集成助手,只需要简单描述您的需求,即可自动生成集成代码,大幅提升开发效率。
跑通后运行效果如下图所示:


前提条件

开通服务

1. 登录 即时通信 IM 控制台。如果您已有应用,请记录其 SDKAppID 和密钥信息。
2. 应用管理页面,单击创建新应用

3. 输入应用名称、选择合适的数据中心,单击确定即可完成应用的创建。



4. 应用管理页面的 SDKAppID 列获取 SDKAppID 和密钥信息。

注意:
查看密钥信息需要验证身份。
密钥信息为敏感信息,为防止他人盗用,请妥善保管,谨防泄露。
5. 创建两个预设账号用于互相发送消息


环境准备

Node.js v18 版本及以上,建议使用当前的 LTS v22 版本

操作步骤

获取 Demo

说明:
为了尊重版权,IM Demo/TUIKit 工程中默认不包含大表情元素切图。在正式上线商用前,请您替换为自己设计或拥有版权的其他表情包。请注意,下图所示的默认小黄脸表情包版权属于腾讯云,您可以通过升级至 IM 企业版套餐 免费使用该表情包。



git clone https://github.com/Tencent-RTC/TUIKit_Vue3.git


安装并运行

cd TUIKit_Vue3/demos/rtcube-vite-vue3
npm install
npm install -D sass
npm run dev


体验单聊和群聊功能

登录完成后会自动跳转到 Chat 场景,可以体验聊天功能。

体验单聊功能:搜索好友并发送您的第一条消息



体验群聊功能:创建群聊并发送一条消息



相关文档

官方文档:
npm 包:
GitHub:

技术支持:

如遇任何问题,可联系 官网售后 获得专业工程师支持。