使用 vuetron 调试 mpvue 项目

Andrman 发布于2019-08-22 18:16 / 993人阅读

摘要：简介由于小程序开发工具的封闭，我们无法通过安装插件来方便地使用调试我们的项目。这里我们主要使用其对的调试功能。注截图来自的官方文档。

简介

由于小程序开发工具的封闭，我们无法通过安装 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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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