Vue Demo(WebIM)介绍

大约 2 分钟

Vue Demo(WebIM)介绍

环信即时通讯 Web 端提供示例应用可供体验。你可以按以下步骤体验:

  1. 登录 Demo。

img

img

  1. 输入你的手机号,获取验证码,然后输入。

  2. 点击 登录 登录 Demo。

代码下载

欢迎大家提交 PR 改进和修复 Web IM 中的问题。

运行 Web IM 项目

github 下载open in new window 下载项目代码压缩包,然后解压。解压后,webim-vue-demo 文件夹即为 Web IM 的项目目录。

  1. 安装 Demo 所需的依赖:在终端中运行 cd demonpm install 命令。

  2. 运行 Demo:

    • 如果通过 HTTP 访问 Demo,在终端中运行 cd demonpm start 命令。命令运行后会生成 Demo 的访问地址,例如 https://localhost:3001。通过 HTTP 访问的 Demo 中不包含音视频功能。
    • 如果通过 HTTPS 访问 Demo,在终端中运行 cd demoHTTPS=true npm start 命令。命令运行后会生成 Demo 的访问地址,例如 https://localhost:3001。通过 HTTPS 访问的 Demo 中包含音视频功能。

主要模块介绍

Demo 中的主要模块如下:

模块名称描述
assets资源文件。
components项目中定义的组件。
config消息表情。
pages登录和聊天页面。
router路由。
store使用 Vuex 处理的数据。
utilsSDK 配置。

部分 UI 展示

Vue 2 Demo 界面

img

Vue 3 Demo 界面

img

img