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