客户端开发(Electron)加入Vue2.6
2023-02-18 16:41:27 时间
Dear,大家好,我是“前端小鑫同学”,?长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
创建Vue基础项目:
- 我们通过VueCli(
vue create electron-vue-demo
)快速创建一个Vue的基本项目:
安装electron-builder插件:
- 安装【vue-cli-plugin-electron-builder】插件:
vue add electron-builder
: - 插件的源码地址:https://github.com/nklayman/vue-cli-plugin-electron-builder
- 安装成功后启动和编译命令变更如下图所示:
- 使用
yarn electron:serve
或npm run electron:serve
- 启动过程中会拉取vue-devtools的浏览器调试插件,这个时候你如果没有使用科学的方式上网将会出现下图的错误信息:
- 这时候如果你可以使用科学的方式来下载那更好,毕竟做开发还是要会的,如果暂时不方便就
src/background.js
中的await installExtension(VUEJS_DEVTOOLS)
暂时注释掉并将项目重新启动一次。
- 如果你使用科学的方式下载到了vue-devtools插件,控制台可能会出现如下错误(翻了一圈Issues感觉同样的错误,但没解决问题。。。),其实并没有影响我的使用:
加入Vue后的项目结构:
- 改动1:启动&编译命令的调整
- 改动2:增加主进程文件
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调试插件,并配置了调试程序的脚本,后续的更多实例都会通过此次搭建的基础环境来做演示,一起动手实现吧。
相关文章
- 一次加载1w条数据的最优解是什么?
- 靶向治疗!获诺奖的 “点击化学” 原来可以这么用 - MedChemExpress
- 自动化部署Jenkins
- Upload-labs学习笔记
- 刻意练习-提高你的编程水平(附带练习网址)
- 低代码如何融入开发团队
- SVN版本控制
- WHO 盘点 | 这些小分子药物有潜力 - MedChemExpress
- 富文本样式设计例子(掘金)
- Vim编辑器及常用操作
- java之泛型理解
- 行业痛点|跨境物流供应链如何应对市场受限问题
- css 指定孩子节点样式设置
- Java基础之集合
- 激活工具_MAS_1.3_Win10_CN.cmd
- Java设计模式之建造者模式
- typecho设置伪静态_Win_IIS环境如何安装
- Java设计模式之原型模式
- VLAN间路由配置方法,单臂路由、三层交换_路由交换基础
- UltraISO软碟通老牌的ISO编辑软件V9.76