客户端开发（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：
• 插件的源码地址：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调试插件，并配置了调试程序的脚本，后续的更多实例都会通过此次搭建的基础环境来做演示，一起动手实现吧。