要在 Nuxt.js 项目中使用网易云信，需要完成以下几个步骤：
1. 安装 NIM Web SDK
可以通过 npm 或 yarn 安装 NIM Web SDK：
npm install @netease-web-im/nim-sdk --save
yarn add @netease-web-im/nim-sdk
2. 创建一个 NIM 实例
在代码中，需要创建一个 NIM 实例，并在创建实例时传递配置参数。这些参数包括应用密钥、用户名、密码或 token 等。
例如，可以在 plugins/nim.js 文件中创建 NIM 实例，代码如下：
import SDK from '@netease-web-im/nim-sdk'
const nim = SDK.NIM.getInstance({
appKey: 'your_app_key',
account: 'your_username',
token: 'your_password_or_token',
onconnect: function() {
console.log('连接成功');
},
onerror: function(error) {
console.log('连接出错，错误码：' + error.code + '，错误信息：' + error.message);
}
})
export default ({
app }, inject) => {
inject('nim', nim)
}
在这个例子中，我们将 nim 实例作为 Vue.js 的插件导出，并通过 n i m 注入到应用程序中，这可以在组件中通过 t h i s . nim 注入到应用程序中，这可以在组件中通过 this. nim注入到应用程序中，这可以在组件中通过this.nim 访问到 nim 实例。
3. 注册 NIM 事件监听器
一旦创建了 NIM 实例，就需要为它注册事件监听器，以便接收和处理来自 NIM 的事件，可以在 plugins/nim.js 文件中注册监听器，例如：
nim.on('msg', function(msg) {
if (msg.scene === 'p2p' && msg.target === 'your_username') {
console.log('收到一条新消息：', msg.text);
}
});
在这个例子中，我们为 nim 实例注册了一个 msg 事件监听器，当收到一条新的 p2p 消息时，输出消息内容到控制台。
4. 在组件中使用 NIM 实例
在组件中，可以通过 $nim 访问到 nim 实例，并调用 NIM 的 API 来实现各种功能，例如发送文本消息、获取历史消息等。
例如，可以在一个聊天组件中使用 nim 实例来发送文本消息，代码如下：
<template>
<div>
<div v-for="msg in messageList" :key="msg.id">{
{
msg.text }}</div>
<input v-model="message" @keydown.enter="sendMessage" />
</div>
</template>
<script>
export default {
data() {
return {
nim: null,
message: '',
messageList: []
}
},
mounted() {
this.nim = this.$root.$options.$nim
// 监听收到消息的事件
this.nim.on('msg', this.handleMessage)
},
beforeDestroy() {
// 在组件销毁前取消监听事件
this.nim.off('msg', this.handleMessage)
},
methods: {
handleMessage(msg) {
// 判断是否为文本消息，并且是来自当前聊天对象的消息
if (msg.type === 'text' && msg.from === this.account) {
this.messageList.push(msg)
}
},
sendMessage() {
if (this.message.trim()) {
this.nim.sendText({
scene: 'p2p',
to: this.account,
text: this.message,
done: (error, msg) => {
if (!error) {
this.messageList.push(msg)
this.message = ''
}
}
})
}
}
}
}
</script>
在这个例子中，我们定义了一个 messageList 数组来存储聊天记录，使用 v-for 指令将每一条消息渲染到页面上。当用户在输入框中输入消息并按下回车键时，调用 sendMessage 方法来发送消息，并在发送成功后将消息添加到 messageList 数组中。我们还监听了 msg 事件来处理收到的消息，并仅将来自当前聊天对象的文本消息添加到 messageList 数组中。
需要注意的是，在组件的 mounted 和 beforeDestroy 钩子函数中分别调用 nim.on 和 nim.off 方法来监听和取消监听 msg 事件。这是为了避免在组件销毁后仍然接收到消息而引发的错误。
5. 集成 UI 组件
如果想更快地创建一个即时通讯应用，可以考虑使用 NIM UI 组件库，这是一个基于 Vue.js 的 UI 库，提供了各种聊天界面和工具组件。
可以通过以下命令安装 NIM UI：
npm install @netease-web-im/nim-ui --save
然后在 Nuxt.js 项目中引入和注册 NIM UI 组件：
import Vue from 'vue'
import NIMUI from '@netease-web-im/nim-ui'
Vue.use(NIMUI)
在组件中，可以使用 NIM UI 组件来构建聊天界面和工具条，例如：
<template>
<nim-chat-room
:account="account"
:show-toolbar="true"
:send-msg="sendMsg"
:get-history-msgs="getHistoryMsgs"
/>
</template>
<script>
export default {
data() {
return {
account: 'other_username'
}
},
methods: {
sendMsg({
type, value }) {
const nim = this.$nim
if (type === 'text') {
nim.sendText({
scene: 'p2p',
to: this.account,
text: value,
done: (error, msg) => {
if (!error) {
this.$refs.chatRoom.appendMsgs([msg])
}
}
})
}
},
getHistoryMsgs() {
const nim = this.$nim
nim.getHistoryMsgs({
scene: 'p2p',
to: this.account,
limit: 10,
done: (error, data) => {
if (!error) {
this.$refs.chatRoom.appendMsgs(data.msgs)
}
}
})
}
}
}
</script>
在这个例子中，我们使用了 nim-chat-room 组件来创建一个聊天室，通过 $refs 访问到组件实例，然后调用 appendMsgs() 方法将消息添加到聊天记录中。
以上就是在 Nuxt.js 中使用网易云信的基本步骤，你可以根据自己的需求进一步修改和完善。