使用 vuetron 除錯 mpvue 專案

徒言發表於2018-06-24
Vue除錯

簡介

由於小程式開發工具的封閉，我們無法通過安裝 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()],
});
複製程式碼

功能

  • 檢視並與管理專案當前的資料

state

  • 在不同時刻的資料之間進行切換，或者立即恢復一組完整的專案資料

eventstream

  • 訂閱特定資料來進行除錯

Subscribe

vue-devtools

事實上 vue-devtools 也提供了一個遠端除錯工具 vue-remote-devtools，開發微信公眾號時直接引用一個指令碼即可，但是小程式中目前還無法直接使用，需要我們對官方的指令碼做些修改，後面有空完善後會再做詳細介紹。

注

截圖來自 vuetron 的官方文件。

相關文章