第一章 搭建Electron框架
1.Electron是什么？
简单来说，Electron 就是给你的网页套了一个"浏览器壳"（Chromium），让它能在 Windows 和 Mac 上像独立软件一样运行。
它内部有两类进程：
- 渲染进程 ：负责显示你看到的界面（页面样式、按钮等），只管"展示"，不参与任何计算或数据收集。
- 主进程 ：负责所有"幕后工作" ------调用 Electron 自带的各种系统 API（比如文件读写、系统通知），也可以调用外部接口。计算好或收集完数据后，通过 IPC 通道 把结果传给渲染进程，让界面显示出来。
简单概括：渲染进程管"看"，主进程管"干"，两者用 IPC 通信。
2. 搭建基本框架，让窗口显示出来
2.1 创建 package.json
先创建一个空白文件夹，在文件夹地址栏中输入 CMD（在当前目录下打开命令提示符），然后输入：
sh
npm init -y
这条命令会自动生成 package.json 文件并填充默认字段。为本教程的目的，有几条规则需要留意：
- 入口点 （
main）应当为main.js（你很快就会创建它） author、license和description可以填任意值，但后面的打包步骤会用到它们
2.2 安装 Electron
在同一个 CMD 窗口中输入以下命令：
sh
npm install electron --save-dev
回车后等待约 30 秒，可以看到文件夹中多出了两个内容：
node_modules文件夹：存放 Electron 的各种依赖文件package-lock.json文件：用于锁定版本，保证团队协作时依赖一致性
2.3 修改package.json文件
打开 package.json，在 "scripts" 字段中添加一条启动命令（注意末尾要有逗号）：
json
"start": "electron ."
这条命令定义了 Electron 的启动方式。修改完成后记得 Ctrl+S 保存。
2.4 创建主进程文件 main.js
在根目录中创建 main.js 文件，写入以下代码：
js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
这就是前文提到的主进程文件。它定义了窗口尺寸、要加载的 HTML 页面，以及应用启动时的行为。
2.5 创建渲染进程文件 index.html
在根目录中创建 index.html 文件，写入以下代码：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Hello from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
<p>👋</p>
</body>
</html>这就是渲染进程------说白了就是最普通的 HTML 网页代码。
2.6 启动 Electron 项目
准备工作完成后，在终端中执行以下命令，即可启动 Electron 应用：
sh
npm run start
看到窗口弹出来了吧？其实挺简单的。不过后续会涉及进程间通信（IPC）、Electron API 或外部 API 的调用，那部分可能会稍微复杂一些。慢慢来，一步步掌握就好。