Electron 是一个开源框架，它允许你使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它结合了 Chromium（用于显示 web 页面）和 Node.js（用于访问本地系统资源）的优势。由于 Electron 的跨平台特性，你可以使用同一套代码构建出在 Windows、macOS 和 Linux 上运行的应用程序。
本教程将为你介绍如何入门 Electron，以及如何构建一个简单的桌面应用程序。
- 安装 Node.js 和 npm
要开始使用 Electron，你首先需要安装 Node.js 和 npm。请访问 Node.js 官网（nodejs.org/）下载适用于你的操作系… 包管理器）将随 Node.js 一起安装。
- 创建项目文件夹
首先，创建一个新文件夹来存放你的 Electron 项目。接下来，打开命令提示符或终端，导航到该文件夹，并运行以下命令以初始化项目：
npm init
此命令将引导你输入一些项目相关信息，如项目名称、版本等。完成之后，它将在文件夹中生成一个名为 package.json 的文件，用于存储项目的元数据。
- 安装 Electron
现在，你需要将 Electron 添加到项目中。在命令提示符或终端中运行以下命令：
npm install electron --save-dev
这将下载 Electron 并将其添加到项目的 devDependencies 中。
- 创建应用程序
在项目文件夹中创建一个名为 index.html 的文件，它将作为 Electron 应用程序的主页面。在此文件中，编写以下 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>我的 Electron 应用</title>
</head>
<body>
<h1>欢迎来到我的 Electron 应用！</h1>
</body>
</html>
接下来，创建一个名为 main.js 的文件，它将作为应用程序的主进程。在此文件中，编写以下 JavaScript 代码：
const { app, BrowserWindow } = require('electron');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
最后，在 package.json 文件中，将 scripts 部分修改为：
"scripts": {
"start": "electron ."
}
- 运行应用程序
在命令提示符或终端中，运行以下命令以启动 Electron 应用程序：
npm start
这将打开一个新窗口，显示你在 index.html 文件中编写的内容，至此，成功构建了一个简单的 Electron 应用程序！
