一、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>

 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按鈕顯隱功能實現