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

Posted 2022-04-03 前端小鑫同学

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了客户端开发（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"]
    
  ]