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>