即时通信 IM 直播列表（Web Vue3）

一、快速体验

你可以在 在线体验 中使用 在线开播网站 快速开启一场直播，同时你也可以使用 在线观看网站 来查看账户下直播列表。

二、步骤1：环境配置及开通服务

在进行快速接入之前，请参考 准备工作 集成组件并实现登录。

三、步骤2：安装依赖

你可以选择以下任一方式安装依赖：

npmpnpmyarnnpm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 –savepnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3

四、步骤3: 直播列表页面接入

在你的项目下创建 live-list.vue 文件，可直接复制如下代码至你的项目中集成直播列表页面。

注意：你可以直接复制如下代码至你的工程中集成示例工程，也可以访问 直播列表 地址，查看更加详细的源码内容。

<template> <UIKitProvider theme="dark"> <div class="container"> <header class="header"> <h1 class="title">在线直播</h1> </header> <main class="main"> <LiveList /> </main> </div> </UIKitProvider></template><script setup lang="ts">import { onMounted } from 'vue';import { LiveList, useLoginState } from 'tuikit-atomicx-vue3';import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';const { login } = useLoginState();async function initLogin() { try { await login({ sdkAppId: 0, // SDKAppID, 可以参考步骤 1 获取 userId: '', // UserID, 可以参考步骤 1 获取 userSig: '', // userSig, 可以参考步骤 1 获取 }); } catch (error) { console.error('登录失败:', error); }}onMounted(async () => { await initLogin();});</script><style scoped>:global(*),:global(::after),:global(::before){box-sizing:border-box;margin:0}.container{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(–bg-color-default)}.header{display:flex;align-items:center;flex-shrink:0}.title{margin:0;font-size:16px;font-weight:600;color:var(–text-color-primary);letter-spacing:-.5px}.main{flex:1;padding:24px;overflow-y:auto;min-height:0}</style>

注意：若你需要实现直播列表到进入直播间的跳转逻辑，可参考这篇中 指定直播间 部分内容。

五、开启你的直播列表页面

通过下列命令启动成功后，通过访问本地地址打开直播列表页面。

注意：说明：

注意：上述命令执行成功后，请在浏览器地址栏输入本地访问地址（你可以根据项目参考，例如 http://localhost:5173/live-list，具体端口号可能因你的项目配置而有所不同），即可看到直播列表页面。

npm run dev

六、指定直播间

由于涉及到直播列表(或首页)到观看页面的跳转逻辑，你需要配置 Vue Router 来实现页面跳转 。你可以在项目 src 目录下新建 router 文件夹，并创建 index.ts 文件。然后，在你的主文件（例如 main.ts 或 index.ts）中引入并使用路由。可参见 GitHub 代码示例。

七、步骤1：配置页面路由

请配置你的 Vue Router，将 live-list.vue 映射到直播列表页面。

import { createRouter, createWebHistory } from 'vue-router';const routes = [ { // 直播列表页面, 注意以下代码路径为你项目实际路径 path: '/live-list', component: () => import('../live-list.vue'), }, // 若你需要实现通过点击直播列表直播间封面到对应直播间进行观看，则需要参考如下示例配置观看页面的路由 { // 路由跳转至观看页面, 注意以下代码路径为你项目实际路径 path: '/live-player', component: () => import('../live-player.vue'), },];const router = createRouter({ history: createWebHistory(), routes,});export default router;

八、步骤2：配置 src/main.ts 文件

将路由和多语言配置合并到你项目中的入口文件 src/main.ts 中：

// src/main.tsimport { createApp } from 'vue';import App from './App.vue';import router from './router';const app = createApp(App);app.use(router);app.mount('#app');

九、步骤3：配置 live-list 文件

你需要将以下内容合并到上文中的 步骤3 内容中，进行直播列表到观看页面的跳转。

// live-list.vue 可增量添加至你的代码中<template> <UIKitProvider> // …..省略部分参考快速接入步骤 3 部分 <LiveList @live-room-click="handleLiveRoomClick" /> </UIKitProvider></template><script setup lang="ts">import { useRouter, useRoute } from 'vue-router';const router = useRouter();const route = useRoute();function handleLiveRoomClick(liveInfo: LiveInfo) { if (liveInfo?.liveId) { router.push({ path: '/live-player', query: { …route.query, liveId: liveInfo.liveId } }); }}</script>

十、自由定制

根据上述功能展示图，我们也支持你根据项目需求对直播列表页面进行 UI 定制。主要可供定制的能力如下表所示。

十一、颜色主题及语言

通过配置 App.vue 中 UIKitProvider 的入参，修改主题及语言的默认值。

<UIKitProvider theme="light"> <router-view /></UIKitProvider> <script setup lang="ts">import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';

十二、按钮 Button 和 图标 Icon

你可以对按钮、图标等控件进行自定义。以 live-list.vue 为例，对 Button、Icon 控件执行增删改等操作都可以满足你的自定义需求。除布局调整外，我们还支持对颜色、字体、圆角以及输入框、弹框等内容进行全面修改，充分满足你的 UI 定制需求。

十三、设置昵称及头像

如果你需要自定义昵称或头像，可以在 步骤 3 中的示例代码中通过 setSelfInfo 进行设置，具体示例如下：

import { useLoginState } from 'tuikit-atomicx-vue3';const { setSelfInfo } = useLoginState();// 设置用户个人信息await setSelfInfo({ userName: '张三', avatarUrl: 'https://example.com/avatar.png',});

十四、下一步

恭喜你，现在你已经成功集成了直播列表页面。接下来，你可以实现主播开播页、观众观看页和 UI 自定义等内容，可参考下表：