简介

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

安装

npm 模块

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

客户端应用

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

• windows
• mac
• linux

使用

• 配置 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()],});

功能

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

state

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

eventstream

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

Subscribe

vue-devtools

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

注

截图来自 vuetron 的官方文档。

原著是一个有趣的人,若有侵权,请通知删除