vue項目使用第三方評論平臺“暢言”教程
筆者最近在寫自己的個人網站，但由於對於後臺知識比較欠缺，又想在自己的個人網站 上加入評論功能。一開始想過用IndexDB保存用戶輸入的評論以及其他信息數據，再將數據保存進後臺數據庫，但連接數據庫部分怎麼說都要後臺來實現。
後來發現了“暢言”這個第三方評論平臺，可以實現登錄、評論、評論管理等等操作，使用方法也很簡單，但用上vue項目上且對於經驗不多的我也遇到了一些難點，網上沒有過多的資料，要自我克服。
使用方法
首先創建新的js文件，把“暢言”提供的公用代碼複製進去，用export引出成包
如
export function createComment(){
var appid = 'cytWmGQre';
var conf = 'prod_98601cbedcf0ecda51195654fc1683fb';
var width = window.innerWidth || document.documentElement.clientWidth;
if (width < 960) {
//代碼
} })();
由於筆者的個人網站是進行了移動端適配的，所以代碼使用的是網頁自適應的代碼，原理其實也很簡單，就是判斷網頁寬度來判斷設備是否移動端，其實這裏還有很多更好的方法來代替
如下
function IsPC(){
let userAgentInfo = navigator.userAgent;
let Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
let flag = true;
for(let i=0;i<Agents.length;i++){
if(userAgentInfo.indexOf(Agents[i])>0)
{
flag=false;break
}
}
return flag;
}
let flag = IsPC(); //true爲PC端，false爲手機端
這段是筆者在做移動端適配時寫的一段，通過判斷設備類型來判斷設備是否移動端，也有一定的缺陷，但比上一段代碼要好很多。
後面就很簡單了
在你想要使用的vue組件裏import {createComment} from "./XXX" 這裏XXX指的是你剛剛建立的js文件。
然後在生命週期mounted引用createComment()即可開始使用暢言評論系統了。
具體使用直接在組件裏引入標籤 div，id屬性爲SOHUCS即可。
主要遇到的問題
一開始筆者按照官方的方法，把<script> //代碼 </script>直接引入，奈何templete不能直接解析該標籤，後來筆者直接把<script> //代碼 </script>引入根文件夾index.html，此時會得到一個無法捕獲div對象的錯誤，此時筆者就猜想由於vue建立的是虛擬DOM，直接在根文件夾中引入會導致Vue中虛擬DOM樹還沒有渲染就先在官方給出的代碼裏進行對vue虛擬DOM樹的元素進行DOM操作了。
知道這個原因後就很簡單了，解決方案就是在vue項目mounted生命週期裏執行createComment()進行DOM操作，原因也很簡單，因爲只有到了mounted生命週期，對象才掛載到html中，此時纔有實際的對象進行DOM操作，否則將捕獲不到需要的元素。