如何以最快速度将Vue接入在线客服系统（） vue.js前端

虽然 Vue 框架和作者尤雨溪本人早已是研发行业，尤其是前端开发领域人尽皆知的存在，但是本文正式开始之前，还是要做一个简单的介绍，来照顾一下不太了解的读者。

Vue 框架，是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。——摘自 Vue 官方网站

如果没有技术背景也没关系，我们来通俗地解释一下：
一般来说，项目研发分为前端和后端，如果以某个网页为例来解释，你可以简单理解为：后端研发负责“怎么让网页正常运行”，而前端研发负责“怎么让网页运行起来更好看”。
但这个时候，问题出现了：想让网页好看有无数种方案，前端研发人员不论用哪种方案，都得从零开始一点一点地搭建，费时费力。
于是类似 Vue 这样的前端框架就诞生了，它直接告诉所有前端研发人员：不用花时间想这个问题了，我给你搭好了一个框架，你只需要把你觉得好看的元素放进去就行了（即：模块化）。
这样一来，不仅提升了研发的效率，还降低了成本，一举两得，非常完美~
好了，解释完 Vue 的用途，我们就该回到今天的正题了：如何将 Vue 接入在线客服？
首先，在线客服的 JS 插件代码一般放在 index 入口页，可以参考下图：

文章图片

接入成功后，呈现的效果，如下图右下角红框所示（这里用美洽官网来举例）：

文章图片

是不是灰常简单？
但是先别着急，因为真实环境下的需求是复杂的。
比如：如果想在某些页面隐藏咨询入口（或按钮），或者在特定的页面用特定的方式展示咨询按钮，该如何才能实现？
可以通过调用_MEIQIA('withoutBtn'); 方法（下图）实现隐藏入口（或按钮）吗？

文章图片

事实上，这种方式实时调用是没有效果的，一旦隐藏就会将所有页面的咨询入口（或按钮）全部隐藏。
我们建议：比较好的做法是自定义按钮，在需要咨询按钮的页面调用美洽_MEIQIA('showPanel'); 方法打开聊天窗口。
【如何以最快速度将Vue接入在线客服系统（）】有些技术人员按照这样的方式做了，比如：在 Vue 模板里直接调用