创建一个基本的 Electron 应用项目的详细步骤。我们将从安装 Node.js 开始，然后创建项目文件夹并初始化 Electron 项目。
1. 安装 Node.js
首先，确保你已经安装了 Node.js 和 npm。你可以在终端中运行以下命令来检查是否已经安装：
node -v
npm -v如果终端返回了 Node.js 和 npm 的版本信息，说明你已经安装了它们。如果没有返回版本信息，你需要先安装 Node.js。
你可以从官网下载并安装最新版本的 Node.js。安装完成后，再次运行上述命令检查版本信息。
2. 创建项目文件夹
打开终端，创建一个名为 demo 的文件夹，并进入该文件夹：
mkdir demo
cd demo
3. 初始化项目
在 demo 文件夹中初始化一个新的 Node.js 项目。运行以下命令：
npm init -y这将创建一个默认的 package.json 文件，其中包含了项目的元数据。
4. 安装 Electron
安装 Electron 作为项目的开发依赖
npm install --save-dev electron5. 配置项目
创建主进程文件
在项目根目录下创建一个名为 main.js 的文件，这是 Electron 应用的主进程文件。编辑 main.js，添加以下内容：
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');function createWindow() {const mainWindow = new BrowserWindow({width: 800,height: 600,icon: path.join(__dirname, '/img/logo.ico'), // 设置图标webPreferences: {preload: path.join(__dirname, 'preload.js')}});// 打开开发者工具（控制台）mainWindow.webContents.openDevTools();mainWindow.loadFile('index.html');// 隐藏菜单栏Menu.buildFromTemplate([]);Menu.setApplicationMenu(null);
}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();
});创建预加载文件
在项目根目录下创建一个名为 preload.js 的文件，这是预加载脚本文件，用于在主进程和渲染进程之间进行通信。编辑 preload.js，添加以下内容：
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electron', {send: (channel, data) => {ipcRenderer.send(channel, data);},receive: (channel, func) => {ipcRenderer.on(channel, (event, ...args) => func(...args));}
});创建 HTML 文件
在项目根目录下创建一个名为 index.html 的文件，这是 Electron 应用的主界面。编辑 index.html，添加以下内容：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Electron App</title>
</head>
<body><h1>Welcome to Electron App</h1><button id="sendButton">Send Message</button><script src="renderer.js"></script>
</body>
</html>创建渲染进程文件
在项目根目录下创建一个名为 renderer.js 的文件，这是渲染进程的脚本文件。编辑 renderer.js，添加以下内容：
document.getElementById('sendButton').addEventListener('click', () => {window.electron.send('message', 'Hello from Renderer');
});window.electron.receive('response', (data) => {alert(`Received response: ${data}`);
});6. 修改 package.json
确保 package.json 文件中有启动脚本。编辑 package.json，添加 start 脚本：
{"name": "demo","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron .","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^33.3.1"}
}7. 启动项目
在终端中运行以下命令来启动 Electron 应用：
npm start运行效果：
8. 安装 Electron 和 electron-builder
npm install electron --save-dev
npm install electron-builder --save-dev 9.配置 package.json
在 package.json 文件中添加或修改以下内容：
{"name": "your-app-name","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","build": "electron-builder"},"build": {"appId": "com.yourcompany.yourapp","productName": "YourAppName","directories": {"buildResources": "build","output": "release"},"files": ["dist/**/*","node_modules/**/*","package.json"],"win": {"target": "nsis","icon": "build/icon.ico"},"mac": {"target": "dmg","icon": "build/icon.icns"},"linux": {"target": "AppImage","icon": "build/icon.png"}}
}10. 打包应用
在项目根目录下运行以下命令来打包应用：
npm run build11. 检查输出
打包完成后，你会在 release 目录下找到生成的安装包。根据你的配置，可能有以下几种格式：
- Windows:
.exe或.msi - macOS:
.dmg或.app - Linux:
.AppImage或.deb
