使用 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 便可運行，另外兩個平臺提供的應該都是安裝包。

• 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()],
});
複製代碼

功能

• 查看並與管理項目當前的數據

• 在不一樣時刻的數據之間進行切換，或者當即恢復一組完整的項目數據

• 訂閱特定數據來進行調試

vue-devtools

事實上 vue-devtools 也提供了一個遠程調試工具 vue-remote-devtools，開發微信公衆號時直接引用一個腳本便可，可是小程序中目前還沒法直接使用，須要咱們對官方的腳本作些修改，後面有空完善後會再作詳細介紹。

注

截圖來自 vuetron 的官方文檔。