要创建一个 Electron 的 "Hello World" 工程,可以按照以下步骤进行:
-
首先,确保你已经安装了 Node.js。
-
使用命令行工具进入你要创建项目的目录。
-
运行以下命令来初始化一个新的 Node.js 项目:
bash|
-
npm init -y
这将创建一个默认的
package.json
文件。 -
确保你已经在项目目录下安装了 Electron 模块。运行以下命令来安装 Electron:
bash| -
npm install electron
-
在你的项目目录下创建一个新的 JavaScript 文件,例如
main.js
。 -
在
javascript|main.js
文件中添加以下代码: -
const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); win.loadFile('index.html'); } app.whenReady().then(() => { createWindow(); app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); }); app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit(); });
这段代码创建了一个 Electron 窗口,并加载了一个名为
index.html
的文件。 -
在你的项目目录下创建一个新的 HTML 文件,例如
html|index.html
。在这个文件中,可以添加一些简单的 HTML 内容。 -
<!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> </body> </html>
-
现在,在命令行中运行以下命令来启动 Electron 应用程序:
bash|
-
npx electron .
这将启动 Electron 应用程序并打开一个窗口,其中显示了 "Hello World"。
这样,你就成功创建了一个简单的 Electron "Hello World" 应用程序。可以根据需要修改 main.js
和 index.html
文件来扩展应用程序的功能和界面