Vue-devtools嵌入vConsole插件 (移动端Vue-devtools)
# Vue-vConsole-devtools
Vue-vConsole-devtools
是一款vConsole
插件,把Vue.js
官方调试工具vue-devtools
移植到移动端,可以直接在移动端查看调试Vue.js
应用
桌面使用:
移动端使用:
npm i -s vue-vconsole-devtools
在工程中入口文件 (如src/main.js
)
...
import VConsole from "vconsole";
import { initPlugin } from 'vue-vconsole-devtools'
initPlugin(new VConsole()); // 需要在创建Vue根实例前调用
...
// Vue 2.x
Vue.config.devtools = true;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init",Vue)
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue_plugin.js"></script>
<script>
var vConsole = new window.VConsole();
const Devtools = window.vueVconsoleDevtools
Devtools.initPlugin(vConsole);
</script>
只在开发环境下引入
new Vue({
render: (h) => h(App),
}).$mount("#app");
// 在创建跟实例以后调用, 需要借助webpack的异步模块加载能力
if(process.env.NODE_ENV === "development"){
Promise.all([import("vconsole"), import("vue-vconsole-devtools")]).then(
(res) => {
if (res.length === 2) {
Vue.config.devtools = true;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init",Vue)
const VConsole = res[0].default;
const Devtools = res[1].default;
Devtools.initPlugin(new VConsole());
}
}
);
}
### Sample code
欢迎添加微信 **OmniBug **探讨交流,Email: [email protected]