Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
vue create electron-vue-demo
)快速创建一个Vue的基本项目:
安装electron-builder插件:
vue add electron-builder
:
yarn electron:serve
或 npm run electron:serve
src/background.js
中的await installExtension(VUEJS_DEVTOOLS)
暂时注释掉并将项目重新启动一次。
background.js
因为我们增加的插件对Electron模块进行了一定程度的再次包装,所以调试需进行如下配置,配置脚本来自《Electron实战:入门、进阶与性能优化》;
脚本配置的详细信息可参考:https://code.visualstudio.com/docs/editor/debugging
tasks.json: 目录.vscode/tasks.json
;
{
"version": "2.0.0",
"tasks": [
{
"label": "electron-debug",
"type": "process",
"command": "./node_modules/.bin/vue-cli-service",
"windows": {
"command": "./node_modules/.bin/vue-cli-service.cmd"
},
"isBackground": true,
"args": ["electron:serve", "--debug"],
"problemMatcher": {
"owner": "custom",
"pattern": {
"regexp": ""
},
"background": {
"beginsPattern": "Starting development server\\.\\.\\.",
"endsPattern": "Not launching electron as debug argument was passed\\."
}
}
}
]
}
launch.json: 目录.vscode/launch.json
;
分别可以用来调试主进程代码,渲染进程代码和同时启动调试
{
"version": "0.2.0",
"configurations": [
{
"name": "Electron: Main",
"type": "node",
"request": "launch",
"protocol": "inspector",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"preLaunchTask": "electron-debug",
"args": ["--remote-debugging-port=9223", "./dist_electron"],
"outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"urlFilter": "http://localhost:*",
"timeout": 30000,
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
}
],
"compounds": [
{
"name": "Electron: All",
"configurations": ["Electron: Main", "Electron: Renderer"]
}
]
}
本篇内容讲述了使用vue-cli-plugin-electron-builder项目来为Vue项目增加Electron的功能,同时还安装了vue-devtools调试插件,并配置了调试程序的脚本,后续的更多实例都会通过此次搭建的基础环境来做演示,一起动手实现吧。