第2章：开发环境搭建

2.1 基础环境准备

2.1.1 Node.js 安装与验证

Electron 依赖 Node.js 运行，因此首先需要安装 Node.js。

安装 Node.js

访问 Node.js 官网：https://nodejs.org/
下载并安装：选择 LTS (长期支持) 版本，根据操作系统选择对应安装包

验证安装：

bash

# 检查 Node.js 版本
node -v

# 检查 npm 版本
npm -v

2.1.2 配置 npm 镜像（可选）

为了提高依赖安装速度，可以配置 npm 镜像：

bash

# 配置淘宝镜像
npm config set registry https://registry.npmmirror.com

# 验证配置
npm config get registry

2.2 开发工具准备

2.2.1 VS Code 安装

访问 VS Code 官网：https://code.visualstudio.com/
下载并安装：根据操作系统选择对应安装包
启动 VS Code

2.2.2 必备插件

在 VS Code 中安装以下插件：

Electron Extension Pack
- 提供 Electron 开发相关的多个插件集合
- 包括语法高亮、调试支持等
Debugger for Electron
- 提供 Electron 应用的调试功能
ESLint
- 代码质量检查工具
Prettier
- 代码格式化工具
Node.js Extension Pack
- Node.js 开发相关插件集合

2.2.3 其他推荐工具

Git：版本控制工具
GitHub Desktop：图形化 Git 客户端（可选）
Postman：API 测试工具（可选）

2.3 Electron 项目初始化

2.3.1 方式1：手动初始化

创建项目目录

bash

mkdir my-electron-app
cd my-electron-app

初始化 npm 项目
bash
```
npm init -y
```
安装 Electron
bash
```
npm install electron --save-dev
```

配置 package.json

json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

创建核心文件
- main.js：主进程文件
- index.html：渲染进程页面

2.3.2 方式2：使用官方脚手架

2.3.2.1 electron-quick-start

克隆仓库

bash

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start

安装依赖
bash
```
npm install
```
运行应用
bash
```
npm start
```

2.3.2.2 electron-forge

安装 electron-forge 脚手架
bash
```
npm install -g @electron-forge/cli
```

创建项目

bash

electron-forge init my-electron-app
cd my-electron-app

运行应用
bash
```
npm start
```

2.3.3 两种方式对比

方式	优点	缺点
手动初始化	灵活，可完全控制	配置步骤较多
官方脚手架	快速搭建，配置完整	可能包含不需要的功能

2.4 项目目录结构解析

2.4.1 核心文件

package.json

main 字段：指定主进程入口文件（通常为 main.js）
scripts 字段：配置启动、打包等脚本
devDependencies：开发依赖（如 electron）
dependencies：运行时依赖

main.js（主进程）

app 模块：应用生命周期控制
BrowserWindow：创建应用窗口
事件监听：处理应用事件

index.html（渲染进程）

HTML 结构：应用界面布局
CSS 样式：界面样式
JavaScript：前端交互逻辑

2.4.2 推荐目录结构

my-electron-app/
├── package.json          # 项目配置文件
├── main.js              # 主进程入口
├── index.html           # 主窗口页面
├── preload.js           # 预加载脚本（可选）
├── renderer/            # 渲染进程相关文件
│   ├── css/             # 样式文件
│   ├── js/              # 前端脚本
│   └── assets/          # 静态资源
└── assets/              # 应用资源
    ├── icons/           # 应用图标
    └── images/          # 图片资源

2.5 运行Electron应用

2.5.1 npm 脚本配置

在 package.json 中配置启动脚本：

json

{
  "scripts": {
    "start": "electron .",
    "dev": "electron .",
    "build": "electron-builder"
  }
}

2.5.2 启动命令

bash

# 启动应用
npm start

# 或
npm run dev

2.5.3 验证环境搭建成功

启动应用后，观察以下现象：

应用窗口：出现 Electron 应用窗口
开发工具：默认打开开发者工具（如在 main.js 中配置）
控制台输出：无错误信息
页面内容：显示预期的页面内容

2.6 常见环境问题排查

2.6.1 依赖安装失败

症状：npm install 失败，出现网络错误或权限错误

解决方案：

网络问题：配置 npm 镜像
权限问题：使用管理员权限运行命令或使用 nvm 管理 Node.js 版本
缓存问题：清除 npm 缓存
bash
```
npm cache clean --force
```

2.6.2 应用启动报错

症状：npm start 后出现错误信息

解决方案：

模块未找到：检查依赖是否安装
语法错误：检查 JavaScript 代码语法
路径错误：检查文件路径是否正确
版本冲突：检查 Electron 版本与 Node.js 版本是否兼容

2.6.3 版本冲突

症状：应用启动后出现版本相关错误

解决方案：

指定 Electron 版本：在 package.json 中明确指定版本
更新依赖：更新到兼容的版本
bash
```
npm update
```

2.6.4 其他常见问题

问题	可能原因	解决方案
窗口不显示	main.js 中窗口配置错误	检查 BrowserWindow 配置
开发者工具不打开	未配置 openDevTools()	在 main.js 中添加 win.webContents.openDevTools()
页面加载失败	文件路径错误	检查 loadFile() 路径
应用崩溃	代码错误或内存泄漏	检查控制台错误信息，修复代码

2.7 小结

通过本章的学习，你已经掌握了 Electron 开发环境的搭建方法，包括：

Node.js 环境的准备
开发工具的配置
项目初始化的两种方式
项目目录结构的解析
应用的运行和验证
常见问题的排查

这些知识将为你后续的 Electron 开发提供坚实的基础。在接下来的章节中，我们将深入学习 Electron 的核心架构和功能。

第2章：开发环境搭建 ​

2.1 基础环境准备 ​

2.1.1 Node.js 安装与验证 ​

安装 Node.js ​

推荐版本 ​

2.1.2 配置 npm 镜像（可选） ​

2.2 开发工具准备 ​

2.2.1 VS Code 安装 ​

2.2.2 必备插件 ​

2.2.3 其他推荐工具 ​

2.3 Electron 项目初始化 ​

2.3.1 方式1：手动初始化 ​

2.3.2 方式2：使用官方脚手架 ​

2.3.2.1 electron-quick-start ​

2.3.2.2 electron-forge ​

2.3.3 两种方式对比 ​

2.4 项目目录结构解析 ​

2.4.1 核心文件 ​

package.json ​

main.js（主进程） ​

index.html（渲染进程） ​

2.4.2 推荐目录结构 ​

2.5 运行Electron应用 ​

2.5.1 npm 脚本配置 ​

2.5.2 启动命令 ​

2.5.3 验证环境搭建成功 ​

2.6 常见环境问题排查 ​

2.6.1 依赖安装失败 ​

2.6.2 应用启动报错 ​

2.6.3 版本冲突 ​

2.6.4 其他常见问题 ​

2.7 小结 ​

第2章：开发环境搭建

2.1 基础环境准备

2.1.1 Node.js 安装与验证

安装 Node.js

推荐版本

2.1.2 配置 npm 镜像（可选）

2.2 开发工具准备

2.2.1 VS Code 安装

2.2.2 必备插件

2.2.3 其他推荐工具

2.3 Electron 项目初始化

2.3.1 方式1：手动初始化

2.3.2 方式2：使用官方脚手架

2.3.2.1 electron-quick-start

2.3.2.2 electron-forge

2.3.3 两种方式对比

2.4 项目目录结构解析

2.4.1 核心文件

package.json

main.js（主进程）

index.html（渲染进程）

2.4.2 推荐目录结构

2.5 运行Electron应用

2.5.1 npm 脚本配置

2.5.2 启动命令

2.5.3 验证环境搭建成功

2.6 常见环境问题排查

2.6.1 依赖安装失败

2.6.2 应用启动报错

2.6.3 版本冲突

2.6.4 其他常见问题

2.7 小结