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

「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」。

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

---

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。