Electron 安装
创建一个最简单的 Electron App，来体验下 Electron 。
目录结构
.
├── index.html
├── main.js
└── package.json
安装
npm install electron --save-dev
在 package.json 的 script 中添加 start 命令
{
...
"scripts": {
"start": "electron ."
},
...
}
main.js
// 从 electron 导入相应的模块
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建窗口 大小为 800x600
const win = new BrowserWindow({
width: 800,
height: 600,
})
// 加载 index.html 文件
win.loadFile('index.html')
}
// whenReady 为 app 的生命周期方法，在该生命周期中调用 createWindow 去创建窗口
app.whenReady().then(createWindow)
// 添加监听事件：在最后一个窗口被关闭时，非 macos 的平台应用将退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
// 添加监听事件：当应用程序激活后没有可见窗口时，创建新的浏览器窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
index.html
只是一个 hello world 的展示
<!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-scale=1.0">
<title>hello world</title>
</head>
<body>
hello world
</body>
</html>
运行结果
运行 npm run start
Electron 打包
安装 electron-builder
npm install --save-dev electron-builder
添加 dist 命令
{
...
"scripts": {
"start": "electron .",
"dist": "export CSC_IDENTITY_AUTO_DISCOVERY=false && electron-builder"
},
...
}
注：在 mac 上运行
dist命令时，会有签名的步骤，将CSC_IDENTITY_AUTO_DISCOVERY设置为false，可以跳过签名。
运行结果
运行 npm run dist
在项目根目录下生成 dist 文件夹，dist/mac/electron-vue3.app 是可执行文件。我们也可以看出来生成的文件还是比较大的，有 182MB。
