雖然 Vue 架構和作者尤雨溪本人早已是研發行業，尤其是前端開發領域人盡皆知的存在，但是本文正式開始之前，還是要做一個簡單的介紹，來照顧一下不太了解的讀者。
Vue 架構，是一套用于建構使用者界面的漸進式架構。與其它大型架構不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鍊以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
——摘自 Vue 官方網站
如果沒有技術背景也沒關系，我們來通俗地解釋一下：
一般來說，項目研發分為前端和後端，如果以某個網頁為例來解釋，你可以簡單了解為：後端研發負責“怎麼讓網頁正常運作”，而前端研發負責“怎麼讓網頁運作起來更好看”。
但這個時候，問題出現了：想讓網頁好看有無數種方案，前端研發人員不論用哪種方案，都得從零開始一點一點地搭建，費時費力。
于是類似 Vue 這樣的前端架構就誕生了，它直接告訴所有前端研發人員：不用花時間想這個問題了，我給你搭好了一個架構，你隻需要把你覺得好看的元素放進去就行了（即：子產品化）。
這樣一來，不僅提升了研發的效率，還降低了成本，一舉兩得，非常完美~
好了，解釋完 Vue 的用途，我們就該回到今天的正題了：如何将 Vue 接入線上客服？
首先，線上客服的 JS 插件代碼一般放在 index 入口頁，可以參考下圖：
接入成功後，呈現的效果，如下圖右下角紅框所示（這裡用美洽官網來舉例）：
是不是灰常簡單？
但是先别着急，因為真實環境下的需求是複雜的。
比如：如果想在某些頁面隐藏咨詢入口（或按鈕），或者在特定的頁面用特定的方式展示咨詢按鈕，該如何才能實作？
可以通過調用_MEIQIA('withoutBtn');方法（下圖）實作隐藏入口（或按鈕）嗎？
事實上，這種方式實時調用是沒有效果的，一旦隐藏就會将所有頁面的咨詢入口（或按鈕）全部隐藏。
我們建議：比較好的做法是自定義按鈕，在需要咨詢按鈕的頁面調用美洽_MEIQIA('showPanel');方法打開聊天視窗。
有些技術人員按照這樣的方式做了，比如：在 Vue 模闆裡直接調用 _MEIQIA('showPanel');
但是卻發現：
這樣的方法是無法實作的。原因是 Vue 并不支援這樣直接調用，會報錯。
正确的方法應該是調用 window._MEIQIA('showPanel'); 如下圖所示：
這樣就會在指定頁面中，點選自定義按鈕的情況下，彈出對話視窗，而其他頁面不顯示咨詢入口或按鈕，如下圖所示：