导入 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),
},
},
},
]
}