2
在 Electron 中使用 Vue Devtools
source link: https://wocai.de/post/2023/03/%E5%9C%A8-electron-%E4%B8%AD%E4%BD%BF%E7%94%A8-vue-devtools/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
这篇笔记记录一下我使用 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
流程大致就是这样，为了避免我忘了，单独记下来。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK