使用 vuetron 调试 mpvue 项目

最新推荐文章于 2023-05-20 16:18:13 发布

weixin_33907511

最新推荐文章于 2023-05-20 16:18:13 发布

阅读量175

点赞数

文章标签： javascript webpack 开发工具 ViewUI

原文链接：https://yq.aliyun.com/articles/617689

版权

简介

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