>[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)) 效果演示: