这篇笔记记录一下我使用 Electron 中的 vue devtools 的过程。

和普通的web项目不同，在 Electron 构建的应用项目中中使用 Vue Devtools 稍微麻烦一些。

第一步 安装 Vue Devtools

npm install -g @vue/devtools
# 或者
yarn global add @vue/devtools

如果你不喜欢全局

npm install --save-dev @vue/devtools
# 或者
yarn add -D @vue/devtools

第二步 在项目中引用 Vue Devtools

在当前项目中的 html 的 head 部分加入：

<script src="http://localhost:8098"></script>

第三步 启动项目

对我来说，一般是运行

yarn dev

然后再启动 vue devtools

yarn vue-devtools

此时，vue-devtools 会加载一个独立的界面出来，并且监听 8098 这个端口，如果项目也正常启动了，这个新窗口就会正常展示 vue devtools的内容。

更详细的官方文档见 https://devtools.vuejs.org/guide/installation.html#standalone

流程大致就是这样，为了避免我忘了，单独记下来。