前往 Github 下载 Demo 源码。

Demo 源码的目录结构如下：

.
├── .editorconfig
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .umirc.ts // umi 配置文件，包含路由等
├── .vscode
│   ├── launch.json
│   └── settings.json
├── LICENSE
├── README.md
├── mock
│   └── .gitkeep
├── package.json
├── src // 项目目录
│   ├── app.tsx
│   ├── assets // 资料目录
│   │   └── Index
│   │       ├── add.png
│   │       ├── addressBook_activated.png
│   │       ├── addressBook_inactivated.png
│   │       ├── avatar.png
│   │       ├── chat_activated.png
│   │       ├── chat_inactivated.png
│   │       ├── quit.png
│   │       └── quit_hover.png
│   ├── components
│   │   ├── AddressBookInfo // 好友列表、黑名单列表、群组列表
│   │   │   ├── index.less
│   │   │   └── index.tsx
│   │   └── MyUserInfo // 个人信息
│   │       └── index.tsx
│   ├── config
│   │   └── index.ts // 项目启动配置文件
│   ├── global.less
│   ├── locales // 国际化配置文件
│   │   ├── en-US.ts
│   │   └── zh-CN.ts
│   ├── pages
│   │   ├── AddressBook // 通讯录
│   │   │   ├── index.less
│   │   │   └── index.tsx
│   │   ├── Chat // 会话及聊天
│   │   │   ├── index.less
│   │   │   └── index.tsx
│   │   ├── Login // 登录
│   │   │   ├── index.less
│   │   │   └── index.tsx
│   │   ├── index.less
│   │   └── index.tsx
│   ├── routers
│   │   └── index.ts
│   └── store // 全局 store
│       └── index.ts
├── tsconfig.json
└── typings.d.ts

执行如下命令安装依赖。

$ npm install 

在 src/config/index.ts 中配置 appKey、imAccid、和imToken。

export default {
  appKey: '', // 传入您的 App Key
  imAccid: '', // 传入您的云信 IM 账号
  imToken: '', // 传入您的 Token
  imVersion: 2, // 传入 2 即可，开发者无需关心
  lbsUrls: ['https://lbs.netease.im/lbs/webconf.jsp'],
  linkUrl: 'weblink.netease.im',
};

执行如下命令启动项目。

$ 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 主界面。