VUETRON - 辅助 mpvue 项目调试的小能手

mpvue 项目调试的痛点

mpvue 作为一款优秀的跨端框架，深受广大开发者的喜爱。然而，由于小程序开发工具的封闭性，我们无法通过安装 chrome 插件来方便地使用 vue-devtools 调试我们的 mpvue 项目。这无疑给我们的开发带来了诸多不便。

vuetron - mpvue 项目调试的神兵利器

vuetron 是一个 vue.js 的项目调试工具，同时支持对 vuex 及 vue-router 的调试。它可以帮助我们轻松地调试我们的 mpvue 项目，从而提高我们的开发效率。

如何使用 vuetron 调试 mpvue 项目

1. 安装 vuetron

npm install vuetron --save-dev

2. 在你的 mpvue 项目中配置 vuetron

在你的 mpvue 项目的根目录下，创建一个名为 .vuetronrc.js 的文件，并添加以下内容：

module.exports = {
  host: 'localhost',
  port: 8098
};

3. 启动 vuetron

npx vuetron serve

4. 在你的小程序项目中配置 vuetron

在你的小程序项目中，打开 main.js 文件，并在 created 生命周期中添加以下代码：

if (process.env.NODE_ENV !== 'production') {
  Vue.use(Vuetron);
}

5. 启动你的小程序项目

现在，你可以使用 vuetron 来调试你的 mpvue 项目了。只需在你的浏览器中打开 http://localhost:8098，即可看到 vuetron 的调试界面。

vuetron 对 vuex 的调试功能

vuetron 提供了强大的 vuex 调试功能，可以帮助我们轻松地调试我们的 vuex 状态。

1. 查看 vuex 状态

在 vuetron 的调试界面中，我们可以看到一个名为 "Vuex" 的选项卡。在这个选项卡中，我们可以查看 vuex 的状态树。

2. 修改 vuex 状态

我们可以直接在 vuetron 的调试界面中修改 vuex 的状态。只需点击要修改的状态值，然后输入新的值即可。

3. 追踪 vuex 状态的变化

vuetron 可以帮助我们追踪 vuex 状态的变化。当 vuex 状态发生变化时，vuetron 会自动记录下来。我们可以通过点击 "History" 选项卡来查看 vuex 状态的变化历史。

结语

vuetron 是一个非常强大的 mpvue 项目调试工具，可以帮助我们轻松地调试我们的 mpvue 项目，从而提高我们的开发效率。如果您正在开发 mpvue 项目，我强烈建议您使用 vuetron 来辅助您的开发工作。