环境安装
目前官方的中文文档已经日渐丰富，下面的步骤也主要参考了官方文档。从开发的角度来看，Electron 应用本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：
1. your-app
2. ├── package.json
3. ├── main.js
4. └── index.html因此，我们可以创建项目了：
# 创建项目目录 并进入目录
mkdir my-electron-app && cd my-electron-app
# 初始化项目
npm init
# 安装开发依赖 electron模块
# 本步骤可能比较耗时，视网速而定
# electron和node版本有对应关系，需要注意
npm i electron -D
# 全局安装的话使用
# npm i electron -g
# Mac系统可能需要加sudo
# sudo npm i electron -D
# 如果使用的事root用户，可能需要这个
# sudo npm install -D electron --unsafe-perm=true --allow-root
npm init初始化命令会提示您在项目初始化配置中设置一些值 为本教程的目的，有几条规则需要遵循：
entry point应为main.js.author与description可为任意值，但对于应用打包是必填项。说明：
--unsafe-perm：默认为false，如果为true则使用root用户安装，默认为非root用户安装--allow-root：允许root
如果安装速度比较慢，可以使用淘宝的镜像源：
# 设置Electron的镜像源地址为淘宝的
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
# 或者
npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/安装后，可以使用命令查看我们是否安装成功：
# 在项目目录下执行
npx electron -v
# 如果全局安装的话，直接使用
electron -v我这里使用的不是全局安装，所有使用的是：npx electron -v
创建主脚本文件
创建页面
在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程URL。我们这里选择在本地创建一个index.html文件，内容我们可以随便编写，比如：
<!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>您好，世界</title>
</head>
<body>
<h1>您好，世界！</h1>
</body>
</html>创建主脚本文件
主脚本指定了运行主进程的 Electron 应用程序的入口(就我们而言，是 main.js 文件)。 通常，在主进程中运行的脚本控制应用程序的生命周期、显示图形用户界面及其元素、执行本机操作系统交互以及在网页中创建渲染进程。 Electron 应用程序只能有一个主进程。
目前Electron对ESM支持不太完善，只能使用CommonJS规范。可以通过这里来查看适配进度。
const { app, BrowserWindow } = require('electron')
// 编写一个创建窗口函数
function createWindow() {
// 创建窗口
const win = new BrowserWindow({
width: 800,
height: 600
})
// 窗口中加载 index.html
win.loadFile('index.html')
}
// 当应用程序准备就绪时 执行
app.whenReady().then(() => {
// 调用创建窗口的函数
createWindow()
// 当应用程序被激活时（例如点击应用程序的图标时）
app.on('activate', () => {
// 如果没有窗口存在，则打开个窗口
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
// 当所有窗口都关闭时
app.on('window-all-closed', () => {
// 如果操作系统不是 macOS
if (process.platform !== 'darwin') {
// 退出应用程序
app.quit()
}
})app模块，用于控制应用程序的生命周期和事件处理。通过app模块，可以监听应用程序的各种事件，例如应用程序启动时、窗口关闭时、应用程序退出时等。app模块还提供了一些方法和属性，用于管理应用程序的行为，例如启动应用程序、退出应用程序等。BrowserWindow模块，用于创建和控制应用程序的窗口。通过实例化BrowserWindow，可以创建一个可见的窗口，并对其进行配置和操作，例如设置窗口的大小、加载网页内容、响应用户交互等。
运行项目
npx electron ./打开控制台快捷键
Win：Alt + Ctrl + i
Mac：Alt + Command + i
Comment here is closed