運用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 的官方文檔。