vue使用畅言评论

之前还在使用html编写代码的时候，就已经使用过畅言评论了，总体感觉还好，毕竟那时候是免费的，不能要求太高不是，现在一直在用vue开发项目，发现百度上并没有vue使用畅言的例子，于是就有了这篇博文，希望可以帮助到其他人。

1. 首先写一个vue原型方法，用来动态加载外部script。

Vue.prototype.$loadScript = (url, callback) => {
    let script = document.createElement('script');
    if (script.readyState) { 
    	// IE浏览器
        script.onreadystatechange = function () {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {
                script.onreadystatechange = null;
                callback();
            }
        }
    } else { 
    	// 其他浏览器
        script.onload = function () {
            callback();
        }
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

2. 在生命周期中，加载畅言的script。

<template>
	<div id="SOHUCS" sid="请将此处替换为配置SourceID的语句"></div>
</template>
mounted(){
	window.changyan = undefined;
	window.cyan = undefined;
	this.$loadScript("https://changyan.sohu.com/upload/changyan.js", () => {
        window.changyan.api.config({
            appid: "#####", // 此处换成你的畅言应用的appid,
            conf: "#################" , // 此处换成你畅言应用的conf。
        });
	});
}

至此，就可以在vue中完美的运行畅言评论系统啦。
还有一种方式是畅言官网上的安装方法，需要用到Jquery，我不是很推崇这种做法，有需要的同学可以试试。

1. 安装Jquery

npm install jquery -S

2. 在vue页面中引入Jquery。

<script>
	import $ from 'jquery';
	mounted(){
		window.changyan = undefined;
		window.cyan = undefined;
		$.getScript("https://changyan.sohu.com/upload/changyan.js", () => {
	        window.changyan.api.config({
	            appid: "#####", // 此处换成你的畅言应用的appid,
	            conf: "#################" , // 此处换成你畅言应用的conf。
	        });
		});
	}
</script

如有疑问，请在评论上提出，谢谢，我看到会及时回复的！