2.1 环境准备
在开始使用 Electron 之前，需要准备开发环境。这包括安装必要的软件和工具。
2.1.1 操作系统要求
Electron 支持以下操作系统：
- Windows 7 及以上版本
- macOS 10.10 (Yosemite) 及以上版本
- Linux（大多数现代发行版）
2.1.2 必要的软件
- Node.js：Node.js 是一个 JavaScript 运行环境，Electron 依赖于它。你需要安装 Node.js 和 npm（Node.js 的包管理器）。
- Git：虽然不是必需的，但使用 Git 进行版本控制是一个好的实践。
2.2 安装 Node.js 和 npm
2.2.1 下载和安装 Node.js
访问 Node.js 官方网站 下载适合你操作系统的安装包。建议下载 LTS（长期支持）版本。
Windows 安装步骤
- 下载 Windows 安装包（.msi 文件）。
- 双击安装包，按照提示完成安装。
macOS 安装步骤
- 下载 macOS 安装包（.pkg 文件）。
- 双击安装包，按照提示完成安装。
Linux 安装步骤
在终端中运行以下命令（以 Ubuntu 为例）：
sudo apt update
sudo apt install -y nodejs npm
2.2.2 验证安装
安装完成后，在终端（或命令提示符）中运行以下命令以验证安装是否成功：
node -v
npm -v
如果看到 Node.js 和 npm 的版本号，说明安装成功。
2.3 创建第一个 Electron 应用
2.3.1 初始化项目
在终端中执行以下命令，创建并初始化一个新的项目目录：
mkdir my-electron-app
cd my-electron-app
npm init -y
这将创建一个名为 my-electron-app 的目录，并在其中生成一个默认的 package.json 文件。
2.3.2 安装 Electron
在项目目录中运行以下命令安装 Electron：
npm install --save-dev electron
2.3.3 创建主文件
在项目目录下创建一个名为 main.js 的文件，这是 Electron 应用的入口文件。添加以下内容：
javascript">const { app, BrowserWindow } = require('electron');let mainWindow;
//监听ready事件，就绪后可以创建窗口
app.on('ready', () => {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}});mainWindow.loadFile('index.html');
});//electron专门暴露了app.whenReady方法，返回promise,所以上面的代码也可以写成：
//app.whenReady().then(()=>{
// mainWindow = new BrowserWindow({// width: 800,// height: 600,
// webPreferences: {
// nodeIntegration: true
// }
// }); mainWindow.loadFile('index.html');});
2.3.4 创建 HTML 文件
在项目目录下创建一个名为 index.html 的文件，添加以下内容：
<!DOCTYPE html>
<html><head><title>Hello Electron</title></head><body><h1>Hello, Electron!</h1></body>
</html>
2.3.5 更新 package.json
编辑 package.json 文件，添加一个启动脚本：
{"name": "electron_learn","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron ."},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^31.1.0","nodemon": "^3.1.4"}
}
2.3.6 启动应用
在终端中运行以下命令启动 Electron 应用：
npm start
你将看到一个显示 “Hello, Electron!” 的窗口弹出，这意味着你的第一个 Electron 应用已成功运行。
2.4 项目结构介绍
一个典型的 Electron 项目结构如下：
my-electron-app/
├── main.js // 主进程入口文件
├── index.html // 渲染进程 HTML 文件
├── package.json // 项目配置文件
└── node_modules/ // 依赖模块目录
2.4.1 主进程文件
main.js 是应用的主进程文件，负责创建和管理窗口，以及处理与操作系统的交互。
2.4.2 渲染进程文件
index.html 是渲染进程文件，用于定义应用的用户界面。
2.4.3 配置文件
package.json 是项目的配置文件，包含应用的元数据、依赖项以及脚本等。
通过本章内容，你已经了解了如何准备开发环境、安装 Node.js 和 Electron，以及如何创建和运行一个简单的 Electron 应用。在接下来的章节中，我们将深入探讨 Electron 的核心概念和功能，帮助你逐步掌握 Electron 开发的各个方面。
