在本章中，我们将逐步引导您创建一个简单的 Electron 应用。我们将从安装必要的工具开始，然后创建基本的项目结构，并编写一些基础代码来实现一个简单的桌面应用程序。
安装 Node.js 和 npm
首先，确保您的计算机上已经安装了 Node.js 和 npm（Node 包管理器）。您可以访问 Node.js 官网 下载并安装最新版本的 Node.js。安装完成后，可以通过打开命令行界面（Windows 用户可以使用 CMD 或 PowerShell，Mac 和 Linux 用户可以使用 Terminal）输入以下命令来验证安装：
node -v npm -v
如果这两个命令都成功执行且显示了版本号，则说明 Node.js 和 npm 已正确安装。
创建一个新的项目目录
接下来，我们需要创建一个新的项目目录。这将是我们存放所有项目文件的地方。打开命令行界面，然后运行以下命令：
mkdir electron-app cd electron-app
这里，我们创建了一个名为 electron-app 的新目录，并立即切换到该目录中。
初始化项目
在项目目录中，我们需要初始化一个新的 npm 项目。这将生成一个 package.json 文件，它将用于存储项目的元数据和依赖项。在命令行中运行以下命令：
npm init -y
此命令将使用默认值创建一个 package.json 文件。当然，如果您希望自定义项目信息，可以不使用 -y 参数，并按照提示进行操作。
安装 Electron
现在，我们需要为项目安装 Electron。这可以通过 npm 来完成。在命令行中运行以下命令：
npm install --save-dev electron
这会将 Electron 添加为项目的开发依赖项。--save-dev 参数告诉 npm 将 Electron 列入 devDependencies 部分，而不是 dependencies。这样做是因为 Electron 主要是用于开发阶段，而不是生产环境。
创建主进程文件
接下来，我们需要创建一个文件来作为我们的 Electron 应用程序的主进程。在项目根目录下创建一个名为 main.js 的文件。这个文件将是 Electron 应用程序的入口点。
在 main.js 中，我们需要添加以下代码：
-- -------------------- ---- -------
----- - ---- ------------- - - -------------------
-------- ------------ -- -
----- --- - --- ---------------
------ ----
------- ----
--------------- -
---------------- ----
-
--
--------------------------
-
----------------------------------
--------------------------- -- -- -
-- ----------------- --- --------- -
----------
-
--
------------------ -- -- -
-- ------------------------------------- --- -- -
--------------
-
--这段代码定义了一个函数 createWindow，用于创建并显示窗口。我们通过 BrowserWindow 类来创建一个窗口，并使用 loadFile 方法加载一个 HTML 文件。此外，我们还处理了一些事件，如窗口关闭时的应用退出，以及当所有窗口都被关闭后重新激活应用时的响应。
创建 HTML 文件
现在我们需要创建一个 HTML 文件，用于展示在窗口中。在项目根目录下创建一个名为 index.html 的文件，并添加一些基础的 HTML 结构：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- --------------- ---------- ------- ------ -------- -------- -------- ---------- -------- --------- ------- -------
修改 package.json 文件
为了方便启动我们的 Electron 应用，我们需要修改 package.json 文件，在其中添加一个脚本，用于运行 Electron。在 scripts 部分添加以下内容：
"scripts": {
"start": "electron ."
}这允许我们在命令行中使用 npm start 命令来启动我们的 Electron 应用。
启动应用
一切准备就绪，现在可以在命令行中运行以下命令来启动我们的 Electron 应用：
npm start
如果一切正常，您应该会看到一个新的窗口弹出，显示您刚刚创建的 HTML 内容。
通过以上步骤，我们就成功创建了一个基本的 Electron 应用。接下来的章节中，我们将进一步探讨如何扩展和优化这个应用，包括使用 Vue、React 等前端框架集成到 Electron 中，以及如何处理更多复杂的场景。