客户端开发（Electron）加入Vue2.6 _electron

愿君学长松，慎勿作桃李。这篇文章主要讲述客户端开发（Electron）加入Vue2.6相关的知识，希望能为你提供帮助。

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??：
插件的源码地址：??github.com/nklayman/vu…??
安装成功后?启动?和?编译?命令变更如下图所示：
使用??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实战：入门、进阶与性能优化》；
脚本配置的详细信息可参考：??code.visualstudio.com/docs/editor…??
?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?调试插件，并配置了调试程序的脚本，后续的更多实例都会通过此次搭建的基础环境来做演示，一起动手实现吧。
【客户端开发（Electron）加入Vue2.6】?欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。?