vue移动端调试工具vConsole

vConsole

安装

npm install vconsole -S

全局使用

在main.js里面进行引入

import { createApp } from "vue";
import App from "./App.vue";

// 引入
import VConsole from 'vconsole'
new VConsole()

// 注册使用
createApp(App).mount("#app");

全局使用的话记得发版的时候要注释掉奥

组件内使用

<template>
  <button @click="toggleVConsole">
    {{ showVConsole ? "Hide" : "Show" }} VConsole
  </button>
</template>

<script setup>
import { ref } from "vue";
import VConsole from "vconsole";
const showVConsole = ref(false);
let vConsoleInstance = null;

const toggleVConsole = () => {
  // vConsole实例不存在，则创建实例 
  // vConsole实例存在，则销毁实例
  if (!vConsoleInstance) {
    vConsoleInstance = new VConsole();
  } else if (vConsoleInstance) {
    vConsoleInstance.destroy();
    vConsoleInstance = null;
  }
  // 更改按钮显示文字状态
  showVConsole.value = !showVConsole.value;
};
</script>