一、vue-cli脚手架中搭建的项目引入vConsole调试
1.首先npm安装，大家都懂的。
npm install vconsole
2.在合适的地方新建一个文件vconsole.js，内容如下：
import Vconsole from ‘vconsole‘let vConsole = new Vconsole()export default vConsole
3.在main.js中引入刚刚新建的vconsole.js
//main.js……const VConsole = require(‘/pathto/vconsole‘);……
这个时候基本就能看见界面上出现了vcosole的绿色小按钮了。
此部分基本参考http://www.mamicode.com/info-detail-2231944.html
二、控制vconsole按钮显隐
1.为什么要有这种需求？
防止线上发布时忘记去掉vconsole功能，导致与设计需求不同，或者被用户误操作。加上后算是前端开发人员方便测试的一个工具（尤其是上传发包权利不在你手上的时候），也不用去跟产品解释为什么出来的项目多了个按钮。
2.怎么操作这个按钮？
按钮Dom有自己的ID“__vconsole”。
首先，css里设置
#__vconsole { ?display: none;}然后在app.vue中添加一个tigger控制
比如
<div> ???????<router-view></router-view> ???????<div class="vc-tigger" @click="toggleVc"></div> ???</div>
vc-tigger自己设置合适的宽高位置。尽量不影响其他dom为主要要求。
现在要做的是设置连击十次控制显示隐藏，控制显隐使用toggleClass。引入jq没必要，网上找个原生的写法就行，我参考的写法是https://blog.csdn.net/songchunmin_/article/details/55209644
app.vue最后内容
export default { ???????name: ‘app‘, ???????data(){ ?????????return { ???????????lastClickTime: 0, ???????????count:0 ?????????} ???????}, ???????created(){ ????????}, ???????methods:{ ?????????hasClass(obj, cls) { ???????????return obj.className.match(new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘)); ?????????}, ?????????addClass(obj, cls) { ???????????if (!this.hasClass(obj, cls)) obj.className += " " + cls; ?????????}, ?????????toggleClass(obj,cls){ ???????????if(this.hasClass(obj,cls)){ ?????????????this.removeClass(obj, cls); ???????????}else{ ?????????????this.addClass(obj, cls); ???????????} ?????????}, ?????????removeClass(obj, cls) { ???????????if (this.hasClass(obj, cls)) { ?????????????var reg = new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘); ?????????????obj.className = obj.className.replace(reg, ‘ ‘); ???????????} ?????????}, ?????????toggleVc(){ ???????????const nowTime = new Date().getTime(); ???????????if(nowTime - this.lastClickTime < 3000){ ?????????????this.count ++; ???????????} else { ?????????????this.count = 0; ???????????} ???????????this.lastClickTime = nowTime; ???????????if(this.count >= 10) { ?????????????let vconDom = document.getElementById(‘__vconsole‘); ?????????????this.toggleClass(vconDom,‘show‘) ?????????????this.count = 0; ???????????} ?????????} ?????} ???}Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现
原文地址：https://www.cnblogs.com/liyinSakura/p/9883777.html