前言
@electron-forge/template-base 是一种基于 Electron 的项目启动器，可以快速搭建一个 Electron 基础项目。本文将为大家介绍如何使用该 npm 包来创建 Electron 项目。
安装
首先，我们需要在本地安装 @electron-forge/template-base。可以使用以下命令来完成安装：
npm install -g @electron-forge/cli
安装完成后，可以通过以下命令创建 Electron 项目：
electron-forge init my-new-project --template=base
项目结构
用上述命令创建的项目结构如下：
-- -------------------- ---- ------- --------------- --- ------------- --- ------------ --- ---- - --- ---------- - --- -------- - --- ---------- --- ----------------- --- ---------
其中，index.html 是应用程序的主页面，index.js 是应用程序的主进程代码，preload.js 是用于渲染进程的预加载脚本。
使用示例
为了更好地学习如何使用 @electron-forge/template-base，下面将为大家演示一个使用 Electron 打开本地文件的示例。
首先，我们需要在 index.html 中添加一个按钮：
<button id="open-file">Open File</button>
然后，在 index.js 中添加以下代码：
-- -------------------- ---- -------
----- - ---- -------------- ------ - - -------------------
----- ---- - ---------------
-------- ------------ -- -
----- --- - --- ---------------
------ ----
------- ----
--------------- -
-------- -------------------- -------------
-
--
--------------------------
-
----------------------- -- -
--------------
------------------ -------- -- -
-- ------------------------------------- --- -- --------------
--
--------------------------- -------- -- -
-- ----------------- --- --------- ----------
--
--
------------------------------ ------- ---- -- -
-----------------------
----------- ------------
-------------- -- -
-- ---------------- --- ------ -
---------------------------- ---------------------
-
--
--在以上代码中，我们创建了一个名为 createWindow 的函数来创建应用程序的主窗口。在 app.whenReady().then() 中，我们首先调用 createWindow 函数来创建应用程序的主窗口，然后注册了 app.on('activate') 和 app.on('window-all-closed') 事件来监听应用程序窗口的关闭情况。
接着，我们在 ipcMain.on('open-file-dialog') 中调用 dialog.showOpenDialog() 方法来打开本地文件对话框，用于选择要打开的文件。在该方法回调函数中，我们使用 event.reply() 方法来将选择的文件路径传递给 preload.js。
最后，我们需要在 preload.js 中添加以下代码来处理向渲染进程发送的事件：
-- -------------------- ---- ------- ----- - ----------- - - ------------------- ----- ----------- - ------------------------------------ ------------------------------------- -- -- - ------------------------------------ -- ------------------------------- ------- ----- -- - ----------------- --
在以上代码中，我们首先获取到 id 为 open-file 的 HTML 元素，并添加了一个点击事件来发送 open-file-dialog 事件给主进程。接着，我们使用 ipcRenderer.on() 方法来监听 selected-file 事件，并在该方法回调函数中打印出传递过来的文件路径。
完整代码可参见 GitHub：https://github.com/Electron-Forge/electron-forge/tree/main/examples/base
总结
本文介绍了如何使用 @electron-forge/template-base 来创建 Electron 项目，并演示了一个使用 Electron 打开本地文件的示例。相信通过本文的学习，读者可以更好地掌握 Electron 开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f308f303b0ab45f74a8bcb4