创建一个基本的 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.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-dev9.配置 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