Electron installation

Create the simplest Electron App to experience Electron.

The directory structure

.├ ─ index.html ├─ main.js ├─ package.jsonCopy the code

The installation

npm install electron --save-dev
Copy the code

Add the start command to the script of package.json

{... "scripts": { "start": "electron ." }, ... }Copy the code

main.js

// Import the corresponding module from electron
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create window size is 800x600
  const win = new BrowserWindow({
    width: 800.height: 600,})// Load the index.html file
  win.loadFile('index.html')}// whenReady is the app lifecycle method in which createWindow is called to create the window
app.whenReady().then(createWindow)

// Add listening events: non-MacOS platform applications will exit when the last window is closed
app.on('window-all-closed'.() = > {
  if(process.platform ! = ='darwin') {
    app.quit()
  }
})

// Add listening events: Create a new browser window when there is no visible window after the application is activated
app.on('activate'.() = > {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

Copy the code

index.html

It’s just a Hello World demo

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial =1.0"> <title>hello world</title> </head> <body> Hello world</ body> </ HTML >Copy the code

The results

Run NPM run start

Electron packaging

Install the electron – builder

npm install --save-dev electron-builder
Copy the code

adddistThe command

{... "scripts": { "start": "electron .", "dist": "export CSC_IDENTITY_AUTO_DISCOVERY=false && electron-builder" }, ... }Copy the code

Note: When running dist on a MAC, there is a signing step. Set CSC_IDENTITY_AUTO_DISCOVERY to false and you can skip signing.

The results

Run NPM Run Dist

Generate the dist folder in the project root, dist/ MAC/electric-vue3. App is the executable file. We can also see that the generated file is relatively large, at 182MB.

reference

  • Electron Quick Start Guide
  • Ability to have a build.options for skipping-signing