使用 vuetron 调试 mpvue 项目

发布时间:2019-05-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使用 vuetron 调试 mpvue 项目脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

简介

由于小程序开发工具的封闭,我们无法通过安装 chrome 插件来方便地使用 vue-devtools 调试我们的 mpvue 项目。vuetron 是一个 vue.js 的项目调试工具, 同时支持对 vuex 及 vue-router 的调试。这里我们主要使用其对 vuex 的调试功能。

安装

npm 模块

npm install vuetron weapp.socket.io --save-dev

客户端应用

windows 平台提供的是压缩包,下载解压后,双击 Vuetron.exe 即可运行,另外两个平台提供的应该都是安装包。

使用

  • 配置 webpack 的 alias
需使用 weapp.socket.io 替代 socket.io-client
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    '@': resolve('src'),
    'socket.io-client': 'weapp.socket.io',
    'vue': 'mpvue',
  },
},
  • 作为 vuex 的插件引入
import Vue From 'vue';
import Vuex from 'vuex';
import vuetron from 'vuetron';

Vue.use(Vuex);

const Store = new Vuex.Store({
  // ...
  plugins: [vuetron.Vuetronvuex()],
});

功能

  • 查看并与管理项目当前的数据

使用 vuetron 调试 mpvue 项目

  • 在不同时刻的数据之间进行切换,或者立即恢复一组完整的项目数据

使用 vuetron 调试 mpvue 项目

  • 订阅特定数据来进行调试

使用 vuetron 调试 mpvue 项目

vue-devtools

事实上 vue-devtools 也提供了一个远程调试工具 vue-remote-devtools,开发微信公众号时直接引用一个脚本即可,但是小程序中目前还无法直接使用,需要我们对官方的脚本做些修改,后面有空完善后会再做详细介绍。

截图来自 vuetron 的官方文档

脚本宝典总结

以上是脚本宝典为你收集整理的使用 vuetron 调试 mpvue 项目全部内容,希望文章能够帮你解决使用 vuetron 调试 mpvue 项目所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。