>[danger]仅仅是聊天的过程 --- 这里集成的是环信SDK聊天, 官方暂时只有React的UI, 没有Vue的UI库, 所以自己写一个, 先在vue项目中[集成环信SDK/](vueCli%E9%9B%86%E6%88%90%E7%8E%AF%E4%BF%A1SDK.md) 1. 在chat.vue中 ~~~ mounted() { // 6. 注册监听事件(等待别人给我发消息) this.$store.dispatch('listenConnect', this.myCon); // 7. 登录环信 // 账号密码, 默认去环信官网, 自己控制台中, 注册个账户 let options = { apiUrl: this.WebIM.config.apiURL, user: 'lidongxu', pwd: '111111', appKey: this.WebIM.config.appkey }; this.myCon.open(options); document.onkeypress = this.keypress; }, ~~~ 2. 聊天发送事件 ~~~ sendMessage() { // 8. 我发送消息了, 更新本地消息数组(vuex) this.$store.dispatch("localMessageChange", this.messageText); let _that = this; // 单聊发送文本消息 let sendPrivateText = function () { // 生成本地消息id let id = _that.myCon.getUniqueId(); // 创建文本消息 let msg = new _that.WebIM.message('txt', id); msg.set({ // 消息内容 msg: _that.messageText, // 9. 接收消息对象（对方用户名/ID） to: 'wangergou', roomType: false, // 10. 发送成功, 回调 success: function (id, serverMsgId) { console.log('send Success'); }, fail: function (e) { console.log("Send private text error"); } }); msg.body.chatType = 'singleChat'; // 11. 发送这个文本消息 _that.myCon.send(msg.body); }; sendPrivateText(); // 获取滚动条, 滚动到最底部 this.$el.getElementsByClassName("chat_main_content")[0].scrollTop = this.$refs.chat_main.scrollHeight; } ~~~ [组件单独下载]([https://github.com/lidongxuwork126com/ldx\_vue/tree/master/Vue%E8%81%8A%E5%A4%A9%E7%BB%84%E4%BB%B6](https://github.com/lidongxuwork126com/ldx_vue/tree/master/Vue%E8%81%8A%E5%A4%A9%E7%BB%84%E4%BB%B6)) [完整代码下载]([https://github.com/lidongxuwork126com/VueCli--huanxin](https://github.com/lidongxuwork126com/VueCli--huanxin)) 效果演示: