使用 vuetron 調試 mpvue 項目

Andrman 發布于2019-08-22 18:16 / 990人閱讀

摘要：簡介由于小程序開發工具的封閉，我們無法通過安裝插件來方便地使用調試我們的項目。這里我們主要使用其對的調試功能。注截圖來自的官方文檔。

簡介

由于小程序開發工具的封閉，我們無法通過安裝 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 的官方文檔。

GPU云服務器云服務器 python項目調試 html項目調試 vuetron mpvue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95685.html

前端每周清單第 43 期：2017 JavaScript 回顧、Rust 與 WebAssembly

摘要：楊冀龍是安全焦點民間白帽黑客組織核心成員，被浪潮之巔評為中國新一代黑客領軍人物之一他在本文中依次分享了對于黑客的定義如何從黑客成為一名安全創業者技術創業踩過的坑給技術創業者建議等內容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清單專注前端領域內容，以對外文資料的搜集為...

xorpay 2019-08-22 11:15 評論0 收藏0
【開源】小程序And公眾號商城，外加后臺，功能齊全！

摘要：前言一個集微信公眾號商城小程序商城商城后臺的一個開源項目，后臺是基于開發的，是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發多公眾號管理配置簡單。微信小程序項目下載整個包之后，進行根目錄文件夾。前言一個集微信公眾號商城/小程序商城/商城后臺的一個開源項目，后臺是基于WeiPHP5.0開發的，WeiPHP是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發,多...

VishKozus 2019-08-23 13:49 評論0 收藏0
【開源】小程序And公眾號商城，外加后臺，功能齊全！

摘要：前言一個集微信公眾號商城小程序商城商城后臺的一個開源項目，后臺是基于開發的，是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發多公眾號管理配置簡單。微信小程序項目下載整個包之后，進行根目錄文件夾。前言一個集微信公眾號商城/小程序商城/商城后臺的一個開源項目，后臺是基于WeiPHP5.0開發的，WeiPHP是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發,多...

linkFly 2019-07-01 11:00 評論0 收藏0
用mpvue寫個玩意兒玩玩

摘要：微信開發工具僅用于調試。下面可以配置一個微信小程序的參數，文件就是我們要編輯的頁面了。補充一下，調用之后獲取了經緯度之后，還可以玩玩微信的組件。試著用微信寫一個組件。下周公司要搞黑客馬拉松了，組里可能會做個小程序。然后看到了mpvue感覺還不錯，于是就打算試試水。用vue寫小程序聽上去美滋滋。那么先開始吧！全局安裝 vue-cli $ npm install --global vu...

lauren_liuling 2019-08-22 16:32 評論0 收藏0
用mpvue寫個玩意兒玩玩

摘要：微信開發工具僅用于調試。下面可以配置一個微信小程序的參數，文件就是我們要編輯的頁面了。補充一下，調用之后獲取了經緯度之后，還可以玩玩微信的組件。試著用微信寫一個組件。下周公司要搞黑客馬拉松了，組里可能會做個小程序。然后看到了mpvue感覺還不錯，于是就打算試試水。用vue寫小程序聽上去美滋滋。那么先開始吧！全局安裝 vue-cli $ npm install --global vu...

HackerShell 2019-08-02 10:13 評論0 收藏0