1.安装腾讯im

根据im官网链接: 集成 SDK（Web & 小程序 & uni-app）和SDK文档链接: 即时通信 IM SDK
获取adkappid和生成配置可自行百度或参考：这里

我这里使用 npm引入的方式。

// IM Web SDK
// 从v2.11.2起，SDK 支持了 WebSocket，推荐接入；v2.10.2及以下版本，使用 HTTP
npm install tim-js-sdk --save
// 发送图片、文件等消息需要腾讯云即时通信 IM 上传插件
npm install tim-upload-plugin --save

为了方便调用，我在根目录创建一个tim文件夹，首先在 index.js中实现im实例的创建和插件的注册。

import tim from './tim'
import TIMUploadPlugin from "tim-upload-plugin";
import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin'; // 使用前请将 IM SDK 升级到v2.24.0或更高版本
export default {
  install(app, timOptions){
    // 创建及时通讯实例
    tim.create(timOptions)
    // 注册腾讯云即时通信 IM 上传插件，即时通信 IM SDK 发送图片、语音、视频、文件等消息需要使用上传插件，将文件上传到腾讯云对象存储
    tim.registerPlugin({'tim-upload-plugin': TIMUploadPlugin})
    // 注册腾讯云即时通信 IM 本地审核插件
    tim.registerPlugin({'tim-profanity-filter-plugin': TIMProfanityFilterPlugin})
    // 添加腾讯tim服务实例到Vue实例
    app.prototype.$tim = tim.txTim
  }
}

因为im有会话常量和监听事件常量及其方法（具体看SDK文档），且方法我们还得根据业务进行封装，所以我将im实例和封装的方法集成在一个对象里添加到vue实例中，因此在tim.js中：

import TIM from 'tim-js-sdk';
import * as utils from './utils'
// 空实例对象
let tim = {}
// 创建tim初始化方法
tim.create = (timOptions) => {
  //创建实例
  tim.txIm = TIM.create({ SDKAppID: timOptions.SDKAppID })
  //输出等级
  tim.txIm.setLogLevel(timOptions.logLevel)
  // TIM websocket监听事件常量
  tim.txIm.EVENT = TIM.EVENT
  // TIM 会话类型常量
  tim.txIm.TYPES = TIM.TYPES
  // 集成工具包
  tim.Utils = utils
}
// 创建tim插件注册方法
tim.registerPlugin = (options)=>{
  tim.txTim.registerPlugin(options);
}
export default tim;

在utils.js中写上需要的方法，因为是简单demo，我只封装了基础的几个

import tim from './tim.js';
//登录
export function imLogin(userID,userSig) {
	return new Promise( (resolve, reject) => {
		let promise = tim.txIm.login({userID, userSig});
		promise.then(function(imResponse) {
		  console.log(imResponse.data,'登录成功'); // 登录成功
		  resolve(imResponse.data)
		  if (imResponse.data.repeatLogin === true) {
		    // 标识帐号已登录，本次登录操作为重复登录。v2.5.1 起支持
		    console.log(imResponse.data.errorInfo);
		  }
		}).catch(function(imError) {
		  console.warn('login error:', imError); // 登录失败的相关信息
		});
	})
}
//退出登录
export function imOutLogin() {
	let promise = tim._tim.logout();
	promise.then(function(imResponse) {
	  console.log(imResponse.data); // 登出成功
	  tim.txIm.destroy();//销毁 SDK 实例。SDK 会先 logout，然后断开 WebSocket 长连接，并释放资源
	}).catch(function(imError) {
	  console.warn('logout error:', imError);
	});
}
//获取收到的新消息
export function getNewMessage() {
	return new Promise((resolve, reject)=>{
		let onMessageReceived = function(event) {
			console.log(event,'--------------收到的新消息')
			resolve(event.data)
		  // 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
		  // event.name - TIM.EVENT.MESSAGE_RECEIVED
		  // event.data - 存储 Message 对象的数组 - [Message]
		};
		tim.txIm.on(tim.txIm.EVENT.MESSAGE_RECEIVED, onMessageReceived);
	})
}
//发送文本消息
export function setTextMessage(messageTetx,toUserId) {
	return new Promise( (resolve, reject) => {
		let message = tim.txIm.createTextMessage({
		  to: toUserId,//要发送的用户的userid
		  conversationType: tim.txIm.TYPES.CONV_C2C,
		  payload: {
		    text: messageTetx //发送内容
		  },
		  needReadReceipt: true
		});
		let promise = tim.txIm.sendMessage(message);
		promise.then(function(imResponse) {
		  console.log(imResponse,'发送成功');
		  resolve(imResponse.data.message)
		}).catch(function(imError) {
		  console.warn('sendMessage error:', imError);
		});
	})
}
//获取会话列表
export function getAllConversationList(){
  return new Promise((resolve, reject)=>{
    tim.txIm.getConversationList().then(imRes=>{
      const conversationList = imRes.data.conversationList; // 全量的会话列表，用该列表覆盖原有的会话列表
      const isSyncCompleted = imRes.data.isSyncCompleted; // 从云端同步会话列表是否完成
      if(isSyncCompleted){
        resolve({conversationList, isSyncCompleted})
      }
    }).catch(imError=>{
      reject(imError)
    })
  })
}
//获取聊天记录
export function getMessageList(userId,nextReqMessageID) {
	return new Promise( (resolve, reject) => {
		if(nextReqMessageID) {
			// 下拉查看更多消息
			let promise = tim.txIm.getMessageList({conversationID: `C2C${userId}`, nextReqMessageID});
			promise.then(function(imResponse) {
			  const messageList = imResponse.data.messageList; // 消息列表。
			  const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
			  const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。isCompleted 为 true 时，nextReqMessageID 为 ""。
			  console.log(messageList,'消息列表')
			  console.log(nextReqMessageID,'用于续拉，分页续拉时需传入该字段。')
			  console.log(isCompleted,'表示是否已经拉完所有消息')
			  resolve({messageList,nextReqMessageID,isCompleted})
			});
		}else {
			// 打开某个会话时，第一次拉取消息列表，注意！第一次拉取时不要传入 nextReqMessageID
			let promise = tim.txIm.getMessageList({conversationID: `C2C${userId}`});
			promise.then(function(imResponse) {
			  const messageList = imResponse.data.messageList; // 消息列表。
			  const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
			  const isCompleted = imResponse.data.isCompleted; // 表示是否已经拉完所有消息。isCompleted 为 true 时，nextReqMessageID 为 ""。
			  console.log(messageList,'消息列表')
			  console.log(nextReqMessageID,'用于续拉，分页续拉时需传入该字段。')
			  console.log(isCompleted,'表示是否已经拉完所有消息')
			  resolve({messageList,nextReqMessageID,isCompleted})
			});
		}
	})
}

最后在 main.js中引入

import IM from '@/views/im/index.js'
Vue.use(IM, {
  SDKAppID: 0, // 用你的即时通信应用的 SDKAppID替换0,
  logLevel: 1 // dev级别用0，release级别用1，SDK 输出关键信息，生产环境时建议使用
})

然后在页面使用，css就不搞了，其实没啥难度，看着文档做就行了，发消息的userid需要在列表里拿，所以要不点击列表才出现聊天记录，要不默认第一个，否则拿不到，至于登录所需要的userid和usersig直接让后端存在个人信息里就好了，登录完拿信息登录，这个文章只记录获取消息和发送消息，发图片文件视频聊天语音表情群聊，账号顶出地理位置等等，看文档就ok了。

mounted(){
//获取左侧聊天人员列表
			this.$tim.txIm.on(this.$tim.txIm.EVENT.SDK_READY, (event)=>{
			  this.$tim.Utils.getAllConversationList().then(res=>{
				this.peoList = res.conversationList
				//监听新消息
				this.$tim.txIm.on(this.$tim.txIm.EVENT.MESSAGE_RECEIVED, this.onMessageReceived);
			  })
			})
},
methods: {
//发送消息
			sendMessage() {
				const res = await this.$tim.Utils.setTextMessage(this.sendText,this.userId)
				this.messageList.push(res)
			}
			//获取聊天记录
			getMessage(userId,nextId,type) {
				const res = await this.$tim.Utils.getMessageList(userId,nextId)
				this.messageList = res.messageList
			}
			//收到的新消息
			onMessageReceived(event) {
				this.messageList  = this.messageList.concat(event.data)
			},
}