初始化项目

pnpm init

创建 package.json 内容如下

{
  "name": "electron-camera",
	"productName":"houdunren-camera",
  "version": "1.0.0",
  "description": "后盾人 人人做后盾 houdunren.com",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "向军大叔",
  "license": "ISC"
}

然后安装依赖包

pnpm add -D electron

修改package.json文件中的 main与scripts配置段

name字段会做为app.name的默认值
productName 字段会做为app.name的默认值，优先级高于name
main 主进程脚本
dev 运行electron项目命令

{
  "name": "electron-camera",
  "productName":"houdunren-camera",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^22.0.0"
  }
}

#模板文件

然后创建index.html模板文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>houdunren.com</h1>
  </body>
</html>

#主进程

创建main.js主进程文件，用于创建窗口并加载模板文件

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

const createWindow = () => {
    //定义窗口
    const newWin = new BrowserWindow({
        width: 300,
        height: 300,
    })
    //加载模板
    newWin.loadFile('index.html')
}

//应用准备好后创建窗口
app.whenReady().then(() => {
    createWindow()
    //苹果电脑当关闭所有窗口后，点击dash图标时创建新窗口
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })
})

//非苹果系统当关闭所有窗口时退出应用
app.on('window-all-closed', () => {
    if (process.platform != 'darwin') {
        app.quit()
    }
})

然后在命令行执行

pnpm dev

#自动重起

有时需要当文件修改后，自动重起项目，这时需要安装nodemon模块

pnpm add -g nodemon

并修改 package.json 文件

...
"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "dev": "nodemon --exec electron ."
},
...

然后添加 nodemon.json 配置文件

{
	"ignore": [
		"node_modules",
		"dist"
	],
	"colours": true,
	"verbose": true,
	"watch": [
		"*.*"
	],
	"ext": "html,js"
}

主进程设置窗口的位置，并且让窗口置顶，这样不会遮挡vscode编辑器

...
const mainWin = new BrowserWindow({
  width: 400,
  height: 400,
  x: 1400,
  y: 100,
  alwaysOnTop: true,
})
...

基于框架

平时项目开发我们都会使用到 vue、react等框架开发渲染进程的代码，所以要配置electron与常用框架的整合。下面我们先自己配置个electron+vite+vue3的脚手架，然后在介绍成熟的开源脚手架。

#自己开发

下面我们自己来开发一个使用 electron+vite+vue 技术的脚手架。

首先创建vue3项目

pnpm create vite

然后安装electron

p add -D electron

因为我们要跑两个进程所以要安装 concurrently (opens new window)，它可以控制依次启动多个进程

p add -D concurrently

然后修改package.json

"main": "electron/main.cjs" 定义electron 主进程脚本
"dev": "concurrently "nodemon --exec electron . " "vite"" 定义依次启动 vue与electron脚本

{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "electron/main.cjs",
  "scripts": {
    "dev": "concurrently "nodemon --exec electron . " "vite"",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "concurrently": "^7.6.0",
    "electron": "^22.0.3",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vue-tsc": "^1.0.11"
  }
}

然后定义 electron/main.cjs 主进程脚本

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 600,
    height: 600,
    alwaysOnTop: true,
  })
  win.webContents.openDevTools()
  win.loadURL('http://localhost:5173')

  return win
}

app.whenReady().then(() => {
  createWindow()
  app.on('window-all-closed', () => {
    if (process.platform != 'darwin') app.quit
  })

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length == 0) {
      createWindow()
    }
  })
})

现在就可以启动项目了

pnpm dev

#成熟的脚手架

日常开发可以使用 electron-vite (opens new window)或 electron-vite-vue (opens new window)、 electron-react-boilerplate (opens new window)等脚手架快速创建项目，脚手架已经为我们完成了基本的配置，并支持使用 Vue与React等技术开发Electron项目。

下面使用 electron-vite (opens new window)脚手架创建项目

pnpm create @quick-start/electron

然后进行项目目录 electron-vite-vue 安装依赖包

pnpm install

然后运行项目

pnpm run dev

运行项目后会打开Election应用

Electron - demo