第2章：Electron的安装与配置

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 应用的入口文件。添加以下内容：

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/     // 依赖模块目录