前往 Github 下载 Demo 源码。

Demo 源码的目录结构如下：

.
├── src // 项目目录
│   ├── YXUIKit  // IM UIKit 组件
│   │   ├── chat-kit-ui
│   │   ├── common-ui
│   │   ├── contact-kit-ui
│   │   ├── conversation-kit-ui
│   │   ├── im-kit-ui
│   │   └── search-kit-ui
│   ├── components  
│   │   └── IMApp  
│   │       ├── components
│   │            ├── MenuOptions.tsx
│   │            ├── Menus.tsx
│   │            └──Setting.tsx
│   │       ├── locales //国际化配置文件
│   │            ├── demo_locale.ts
│   │            ├── en.ts
│   │            └── zh.ts
│   │       ├── iconfont.css
│   │       ├── index.less
│   │       └── index.tsx
│   └── pages 
│       └── index.tsx //项目启动配置文件
├── .gitignore
├── .npmrc
├── .umirc.ts // umi 配置文件，包含路由等
├── README.md
├── package-lock.json
├── package.json
├── tsconfig.json
└── typings.d.ts

执行如下命令安装依赖。

$ npm install 

在 react/src/pages/index.tsx 中配置 appkey、account、和 token。

import IMApp from "../components/IMApp";

export default function HomePage() {

  const initOptions = {

    appkey: "", // 请填写您的appkey
    account: "", // 请填写您的account
    token: "", // 请填写您的token
  };

return <IMApp {...initOptions}></IMApp>;
}

执行如下命令启动项目。

$ npm run start

执行如下命令构建项目。

$ npm run build

IM Demo 使用 umi.js 搭建，目前没有内置登录，构建项目后您将直接进入 Demo 主界面。

前往 Github 下载 Demo 源码。

完成开发环境启动前的准备工作。

• 如果您是vue-vite开发者，请参考vite.config.ts中的配置，实现对less和alias的支持。

import * as path from 'path'
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [ // 由于部分开发者找不到 node_modules 下的 @xkit-yx 目录，所以需要配置下 alias
      { find: /^~/, replacement: '' },
      { find: '@xkit-yx', replacement: path.resolve(__dirname, './node_modules/@xkit-yx') },
    ]
  },
  server: {
    host: '127.0.0.1',
    port: 8111,
  },
  base: './',
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      }
    }
  }
})

• 如果您是如果是 vue-cli 开发者，参考如下代码配置 vue.config.js，实现对less和alias的支持。

// vue.config.js
const path = require("path");

module.exports = {
  // ……

  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
  },

  chainWebpack: (config) => {
    config.resolve.alias // 由于部分开发者找不到 node_modules 下的 @xkit-yx 目录，所以需要配置下 alias
      .set("~","")
      .set("@xkit-yx", path.resolve(__dirname, "./node_modules/@xkit-yx")); 
  },
};

执行如下命令安装依赖。

$ npm install 

执行如下命令启动开发环境。

npm run dev

执行如下命令构建项目。

npm run build

构建项目后您将直接进入 Demo 主界面。