跳到主要内容

导入 SDK

依赖安装

融云目前仅提供通过 NPM 方式将 IMKit SDK 集成到您的 Web 项目中,暂不支持 CDN 方式集成

提示

IMKit 基于 IMLib SDK 开发,@rongcloud/imlib-next 包为 @rongcloud/imkit 提供了能力支持,开发者无需关心其作用。

npm install @rongcloud/engine --save
npm install @rongcloud/imlib-next --save
npm install @rongcloud/imkit --save

导入 SDK

提示
  • 新集成客户或升级 IMKit 的客户,建议使用 IMKit 5.6.1 及之后版本。
  • IMKit 版本 < 5.6.1,可适配的 IMLib SDK 最高版本为 5.5.5。如遇到问题,请注意限制 IMLib SDK 版本,例如,npm install @rongcloud/engine@5.5.5 @rongcloud/imlib-next@5.5.5 -S

依赖安装完成,导入 IMKit 核心模块,以及由 IMKit 提供的自定义元素组件。目前 IMKit 以自定义元素方式提供组件,包括 <conversation-list/><message-list/><message-editor/>

import * as RongIMLib from '@rongcloud/imlib-next'
// imkit 为核心模块
import { defineCustomElements, imkit } from '@rongcloud/imkit'

// 引入自定义组件
defineCustomElements()

Vue 项目配置示例

Vue 项目需要添加过滤自定义组件配置。本文仅提供了 vue-cli5 与 webpack 的配置示例,仅供参考。具体配置可根据您的项目构建进行修改。

vue-cli5 中 vue.config.js 添加配置

// 此配置适用于 vue-cli5 中的 vue.config.js 配置,由于 vue-cli 不同版本配置可能存在差异,请根据您具体项目实现来增加 '自定义标签不处理' 配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
chainWebpack(config) {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
...options.compilerOptions,
isCustomElement: tag => {
return ['conversation-list', 'message-list', 'message-editor'].indexOf(tag) !== -1
}
}
return options
})
.end()
}
})

webpack.config.js 添加配置

module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
isCustomElement: (tag) =>
["conversation-list", "message-list", "message-editor"].includes(tag),
},
},
},
]
}