安装electron

安装cnpm

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

使用cnpm安装electron，防止安装错误

cnpm install -g electron

初始化

在一个空的node项目中执行node初始化命令

npm init

在该项目中安装electron

cnpm install --save-dev electron

可以发现package.json文件的devDependencies多了electron，证明安装成功。
安装成功后，在scripts写上electron .，后续用于启动electron

{
  "name": "electron_test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^26.2.4"
  }
}

其中main对应的main.js表示electron的入口文件

由于空项目中还没有需要我们创建，并且创建到根目录下

const { app, BrowserWindow } = require('electron')

function createWindow() {
    // 创建浏览器窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    // 窗口最大化
    win.maximize()

    // 加载应用的index.html
    win.loadFile('./src/index.html')

    // 打开开发者工具
    // win.webContents.openDevTools()
}

// 当Electron初始化完成并且准备创建浏览器窗口时调用该方法
app.whenReady().then(createWindow)

// 当所有窗口都关闭时退出应用
app.on('window-all-closed', () => {
    // 在macOS上，除非用户用Cmd + Q显式退出，否则应用与菜单栏始终处于活动状态
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，重新创建一个窗口
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

最后在当前文件夹路径下，启动命令框，并执行命令启动electron

npm run start

修改图标

需要修改electron右上角的图标可以在main.js中的BrowserWindow对象中修改icon属性

const { app, BrowserWindow } = require('electron')

function createWindow() {
    // 创建浏览器窗口
    const win = new BrowserWindow({
		icon: "ico的路径", 
    })
}

打包

安装electron-build

npm install electron-builder -g

在package.json文件中写入打包配置

{
  "name": "electron_test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win --x64"  // 配置打包命令
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^26.2.4",
    "electron-builder": "^24.6.4"
  },
  "build": {
    "productName": "cropImage",  // 软件名称
    "appId": "com.zh.cropImage",  // 软件id
    "directories": {
      "output": "dist"  // 打包输出地址
    },
    "mac": {
      "icon": "src\\static\\icon\\logo.ico"  // mac系统下，图标的路径
    },
    "win": {
      "icon": "src\\static\\icon\\logo.ic",  // windows系统下，图标的路径
      "target": [
        "nsis" 
      ]
    },
    "nsis": {
      "oneClick": false,  // 是否一键安装
      "allowToChangeInstallationDirectory": true,  // 是否允许修改安装目录
      "perMachine": true  // 是否以每台机器为单位进行安装
    }
  }
}