一、环境安装
yarn add --dev electron //将 electron 包安装到应用的开发依赖中
yarn start //开启项目
二、主进程介绍
1.main文件是作为入口文件，要初始化这个main文件，需要在您项目的根目录下创建一个名为main.js的空文件，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。
2.index.html文件是页面渲染文件，也可以是一个远程url。
3.页面中有两个模块：app和BrowserWindow
4.事件的生命周期：
（1）createWindow()：将index.html加载进一个新的BrowserWindow实例。
然后用ready生命周期启动视图
whenReady()：被激发后才能创建浏览器窗口，监听事件。
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
//表示视图框的长度高度
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
（2）window-all-closed事件：监听关闭视图app事件
a、window or linux系统：关闭所有窗口时退出应用，如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
b、macOS：如果没有窗口打开则打开一个窗口
当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。
为了实现这一特性，监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。
因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
三、通过preload预加载脚本从渲染器访问Node.js
在主进程通过Node的全局 process 对象访问这个信息是微不足道的。 然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器文档上下文。 它们存在于完全不同的进程！
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
四、打包并分发应用程序
1、将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架：
yarn add --dev @electron-forge/cli
npx electron-forge import
2、使用 Forge 的 make 命令来创建可分发的应用程序：
yarn run make