📘 第 1 章：Electron 入门基础与环境搭建
🎯 本章目标
你将学会：
什么是 Electron，它适合干啥；
如何在 Windows 上搭建开发环境；
如何运行你的第一个 Electron 程序。
🧠 一、什么是 Electron？
Electron 是啥？
就是一个让你用网页技术（HTML、CSS、JavaScript）来开发桌面软件的工具。你可以用它做出：
VS Code
ChatGPT 桌面客户端
微信开发者工具
为什么好用？
跨平台：写一次，跑三家（Win/macOS/Linux）
用网页技术开发：简单好上手
Node.js 原生支持：能访问文件系统、执行脚本等底层操作
架构特点：
-
Electron 有两个核心：
主进程（Main Process）：控制窗口、菜单、系统调用等
渲染进程（Renderer Process）：展示界面（网页），处理用户交互
🛠️ 二、安装开发环境（Node.js + Electron）
1. 安装 Node.js
Electron 需要 Node.js 作为运行基础。
🔗 官网地址：https://nodejs.org
✅ 安装步骤：
选择 LTS（推荐稳定版本） 下载
安装时勾选「Add to PATH」
-
安装完成后打开终端（CMD 或 PowerShell）输入：
node -v npm -v能看到版本号就成功了。
📁 三、新建 Electron 项目
我们用命令行一步步来创建项目：
1. 新建一个文件夹并进入
mkdir electron-md-editor
cd electron-md-editor
2. 初始化项目（生成 package.json）
npm init -y
这样会生成一个配置文件 package.json。
3. 安装 Electron
npm install electron --save-dev
安装完后，Electron 会作为开发依赖被记录在 package.json 中。
🧩 四、创建项目文件结构
我们手动创建以下几个文件：
electron-md-editor/
├── main.js // 主进程入口
├── index.html // 界面文件
├── package.json // 项目配置
🧠 五、写主进程代码（main.js）
主进程负责启动窗口并加载界面页面。
创建 main.js，写入以下内容：
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600
});
win.loadFile('index.html'); // 加载页面
}
app.whenReady().then(createWindow);
// 关闭所有窗口后退出（macOS 除外）
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
🌐 六、写界面页面（index.html）
创建一个简单网页作为界面内容：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron</title>
</head>
<body>
<h1>欢迎使用 Electron！</h1>
<p>这是你的第一个桌面应用。</p>
</body>
</html>
⚙️ 七、配置启动命令
打开 package.json，添加一个启动脚本：
"scripts": {
"start": "electron ."
}
这样我们就能用 npm start 来启动应用了。
🚀 八、运行应用
在项目根目录下输入：
npm start
你应该会看到一个桌面窗口弹出来，内容就是你在 index.html 里写的文字。
✅ 总结
你已经完成了：
安装 Node.js
初始化 Electron 项目
创建主进程 + 界面
成功运行第一个 Electron 应用！
