接下面两篇持续，我来实现下对话框聊天界面，成果如下图：

  全副代码：

![图片](https://common.cnblogs.com/images/copycode.gif)<template>    <div class="chatAppBody">        <div class="chatTitle">题目</div>        <div class="chatBox">            <div class="chatRow">                <el-avatar class="chatAvatar" :size="30" src="https://goflychat.oss-cn-hangzhou.aliyuncs.com/static/upload/avator/2022June/32a988a3c2f8700119fa1f5da1b6a4bd.png"></el-avatar>                <div class="chatMsgContent">                    <div class="chatUsername">惟一客服零碎</div>                    <div class="chatContent">有什么能够帮您?</div>                </div>            </div>            <div class="chatRow chatRowMe">                <div class="chatContent">你好，这个客服零碎多少钱？</div>            </div>        </div>        <div class="chatBottom">输入框区域</div>    </div></template><script>    export default {      name: 'ChatApp',        data() {          return {          }        },        methods: {        },        mounted: function () {        }    }</script><style lang="scss">    .chatAppBody{        display: flex;        flex-direction: column;        height: 100vh;        background-color: #f1f5f8;    }    .chatTitle{        background: #fff;    }    .chatBox{        flex: 1;        padding: 0 5px;    }    .chatBottom{        background: #fff;    }    .chatRow{        display: flex;        align-items: flex-end;        margin: 5px 0px;    }    .chatAvatar{        margin-right: 5px;        flex-shrink: 0;    }    .chatUsername {        font-size: 12px;        white-space: nowrap;        color: #999;        margin-bottom: 2px;    }    .chatContent{        border-radius: 10px 10px 10px 0px;        padding: 10px;        background-color: rgb(255,255,255);        box-shadow: 0 5px 30px rgb(50 50 93 / 8%), 0 1px 3px rgb(0 0 0 / 5%);        font-size: 14px;        word-break: break-all;        line-height: 21px;    }    .chatRowMe{        justify-content: flex-end;    }    .chatRowMe .chatContent{        border-radius: 10px 10px 0px 10px;    }</style>

应用了 VueRouter、ElementUi 和 axios 等依赖项。代码导入了多个组件，如 Login、ChatPage、ChatApp、Main 和 OnlineVisitor。它应用 VueRouter 设置不同的路由并将 App 组件挂载到 HTML 页面的 #app 元素上。

在路由设置中，它定义了多个路由，每个路由对应一个组件。例如，当拜访 /login 时，会显示 Login 组件。它还设置了一个子路由，在 /main 的路由下还有一个 onlineVisitor 的路由，对应的组件是 OnlineVisitor。

还设置了一个全局变量 ApiHost 和 $axios。应用了 Vue.prototype.ApiHost 将 ApiHost 设置为全局变量，并且赋值为 'https://gofly.v1kf.com'，这样所有的 Vue 组件都能够拜访这个变量。同理 Vue.prototype.$axios 也是一样的,这样就能够在所有组件中应用 $axios 拜访axios模块。这样设置全局变量有助于在利用中重用常量和变量。

惟一在线客服零碎

https://gofly.v1kf.com