1.初始化node项目,生成package.json文件
1 npm init
2.安装electron,并保存为开发依赖项
1 npm install electron -D
3.根目录下新建index.js文件
const {app, BrowserWindow} = require('electron') let mainWindow function createWindow () { mainWindow = new BrowserWindow({width: 800, height: 600}) mainWindow.loadFile('index.html') // mainWindow.webContents.openDevTools() mainWindow.on('closed', function () { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { // On OS X it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (mainWindow === null) { createWindow() } })
4.根目录下新建index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Hello Electron!!</h1> </body> </html>
5.打开package.json文件,新建命令
"scripts": { "start": "electron ." }
6.执行启动命令
npm start
7.安装electron打包工具electron-packager
npm install electron-packager -g
8.配置打包命令
"scripts": { "start": "electron .", "packager": "electron-packager . appName --all --out ../OutApp --app-version 1.0.0 --electron-version=2.0.0 --overwrite --icon xx.ico" }
执行打包命令
npm run pack
命令结构如下(根据实际情况修改):
".":需要打包的应用目录(即当前目录),
"appName":应用名称,
"--all”:打包成所有平台(包括Windows及linux),
"--out ../OutApp":输出目录,
"--app-version=1.0.0":应用版本,
"--electron-version=2.0.0":electron版本
"--icon":图标地址