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

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