electron start

1, install node.js

2, installation Taobao mirror

　　asl install -g cnpm --registry = https: //registry.npm.taobao.org

3, install a global electron

　　npm install -g electron

4. Create a file package.json

　　nPM heat

5, if the overall installation is ignored. Local installation command

　　npm install --save-dev electron

6, package.json content　　

{
  "name": "testapp",
  "version": "0.0.1",
  "description": "testapp",
  "main": "main.js",
  "dependencies": {},
  "devDependencies": {
    "electron": "^7.1.2",
    "electron-packager": "^14.1.1"
  },
  "scripts": {
    "start": "electron .", 
    "packager": "electron-packager . haha --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1"
  },
  "author": "",
  "license": "ISC"
}

7, main.js content

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 
let win
 
function createWindow () {
  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
 
  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)
app.on('window-all-closed', () => {
  
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

8, index.html content

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>aaa</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
 
  </head>
  <body >

    <input type="number" value="">
	  asdfads
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
   
  </body>
</html>

9, start a command ①

　　electron .

10, the start command ②

　　Premise install local dependency

　　npm install　　

　　Elevation start

11, electron-packager packaging installation tool

　　npm install electron-packager -g

12, packing configuration command

  "scripts": {
    "start": "electron .", 
    "packager": "electron-packager . haha --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1"
  }

13, start the Package

　　npm run packager

Guess you like