方案出现的原因：线上bug多种多样，为解决线上bug而产生的想法

下载 yarn add vConsole , vConsole参考 ·https://github.com/Tencent/vConsole·

1.首先npm安装，大家都懂的。

npm install vconsole

2.在main.js中引入刚刚新建的vconsole.js

//main.js
import VConsole from 'vconsole'
 Vue.prototype.$vconsole = new VConsole()

3. App.vue里

// 全局样式
<style lang="scss" >
  div#__vconsole {
    display: none;
    &.show{
     display: block;
    }
  }
</style>


 <b class="vc-tigger" @click="toggleVc">快捷功能</b>

data(){
   return {
    count：0，
    lastClickTime: null
   }
}



    toggleVc () {
      if (process.env.NODE_ENV === 'pre') {
        const nowTime = new Date().getTime()
        if (nowTime - this.lastClickTime < 3000) {
          this.count++
        } else {
          this.count = 0
        }
        this.lastClickTime = nowTime
        if (this.count >= 2) {
          const vconDom = document.getElementById('__vconsole')
          this.toggleClass(vconDom, 'show')
          this.count = 0
        }
      }
    },
    toggleClass (obj, cls) {
      if (this.hasClass(obj, cls)) {
        this.removeClass(obj, cls)
      } else {
        this.addClass(obj, cls)
      }
    },
    hasClass (obj, cls) {
      return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
    },
    addClass (obj, cls) {
      debugger
      if (!this.hasClass(obj, cls)) obj.className += ' ' + cls
    },
    removeClass (obj, cls) {
      if (this.hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
        obj.className = obj.className.replace(reg, ' ')
      }
    },

4.原理就是审查元素，增加节点上的css，然后，开始就初始化成功，但是根据css给他增加class显示隐藏，需要显示的时候，就去调用节点，给显示出来，react 可以参考这种方案