Client development (Electron) adds Vue2.6

“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Dear, hello, everyone. I am “Front-end Xiaoxin”. 😇 has been engaged in front-end development and Android development for a long time

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Embedding Chromium and Node.js into binary Electron allows you to keep a code base of JavaScript code and create cross-platform applications for macOS and Linux running on Windows — no local development experience is required.

Create Vue base project:

• Let’s quickly create a basic vUE project with VueCli (Vue Create electron- VUue – Demo) :

  

  Install the electron Builder plugin:

• Vue add electron Builder: install vue add electron Builder:

• Plugin source address: github.com/nklayman/vu…

• After successful installation, the startup and compile commands change as shown below:

  

• Use YARN electron:serve or NPM run electron:serve

• The browser debugging plugin for vue-devTools will be pulled during the startup process. If you are not using the scientific way to surf the Internet, you will get the following error message:

  

• If you can download it in a scientific way, it is better. After all, you need to be able to do development. If you are not convenient, comment out the await installExtension(VUEJS_DEVTOOLS) in SRC/backframe.js and restart the project.

  

• If you download the vue-devTools plugin in a scientific way, the console may experience the following error. , actually did not affect my use:

  

Project structure after joining Vue:

• Change 1: Tweaks to the startup & compile commands

• Change 2: Added the main process file background-js

  

Add a debug configuration file:

• Because the plug-in we added has repackaged the Electron module to a certain extent, the following configuration is required for debugging. The configuration script is from “Electron Field: Getting Started, Advanced and Performance Optimization”.

• Script configuration details may refer to: code.visualstudio.com/docs/editor…

• Tasks. json: directory 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\\."}}}]}Copy the code

• Json: directory vscode/launch.json;

  • They can be used to debug main process code, render process code, and start debugging at the same time

  {
    "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"]]}}Copy the code

Conclusion:

This article describes the use of vuE-cli-plugin-electric-Builder project to add the electron function for vUE project, at the same time, also installed vue-DevTools debugging plug-in, and configured the script debugging program. In the future, more examples will be demonstrated by the basic environment built this time. Let’s do it together.

Welcome to follow my public account “Front-end Xiaoxin students”, the first time to push original technical articles.