从零创建一个electron项目
从 0 创建一个 Electron 项目的完整步骤如下，包括环境搭建、项目初始化、构建主进程和渲染进程、运行和打包应用：
一、环境准备
1. 安装 Node.js 和 npm（建议使用 nvm 管理）
这里默认已经安装过nodejs环境，更多可以参考
Windows 11 下搭建nodejs开发环境
• 下载地址：https://nodejs.org/
• 安装后验证：
node -v
npm -v 二、初始化项目
mkdir my-electron-app
cd my-electron-app
npm init -y 三、安装 Electron
npm install --save-dev electron 四、创建项目结构
my-electron-app/
├── main.js // 主进程
├── index.html // 渲染进程页面
├── renderer.js // 渲染进程脚本
├── package.json 五、编写主进程代码（main.js）
const { app, BrowserWindow } = require('electron');
functioncreateWindow() {
const win = newBrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: __dirname + '/renderer.js',
}
});
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();
}); 六、编写渲染进程页面（index.html）
<head>
<meta charset="UTF-8" />
<title>My Electron App</title>
</head>
<body>
<h1>Hello Electron!</h1>
<script src="renderer.js"></script>
</body>
七、渲染进程脚本（renderer.js）
// 这是在渲染进程中运行的脚本
console.log('Hello from renderer process!'); 八、在 package.json 添加启动命令
{
"name":"my-electron-app",
"version":"1.0.0",
"main":"main.js",
"scripts":{
"start":"electron ."
},
...
} 九、运行应用
npm start
注意这里如果启动失败，要注意修改package.json文件里的入口文件名称
"main": "main.js",
十、打包应用（可选）
使用 electron-builder 打包成可执行程序：
1. 安装打包工具
npm install --save-dev electron-builder2. 修改 package.json
{
...
"build":{
"appId":"com.example.myapp",
"productName":"MyElectronApp",
"directories":{
"output":"dist"
},
"files":[
"**/*"
]
},
"scripts":{
"start":"electron .",
"pack":"electron-builder --dir",
"dist":"electron-builder"
}
}3. 打包应用
npm run dist
十一、注意pack和dist的区别
这两个脚本命令：
"pack": "electron-builder --dir",
"dist": "electron-builder"
是用来打包 Electron 应用的，但它们的作用略有不同：
"pack": "electron-builder --dir"
功能：
•只打包应用目录（将代码和依赖打包为 Electron 格式），不生成安装程序（如.exe或.dmg）。
• 适合在开发过程中查看最终打包产物结构，但不会生成用户可以双击安装的程序。
示例输出结构（位于 dist/ 文件夹）：
dist/
└── win-unpacked/
├── MyElectronApp.exe
├── ... "dist": "electron-builder"功能：
•完整打包并构建安装包（如 Windows 的.exe安装向导，Mac 的.dmg，Linux 的.AppImage等）。
• 这是给用户发布产品用的命令。
示例输出结构（位于 dist/ 文件夹）：
dist/
├── win-unpacked/ 解压后的可执行文件（等同于 pack 输出）
├── MyElectronApp Setup.exe 安装程序 总结对比：
建议使用时机：
• npm run pack 快速测试打包效果，启动win-unpacked/MyElectronApp.exe。
• npm run dist 真正打包发布给用户使用的安装程序。
- 发表于:
- 原文链接：https://page.om.qq.com/page/OgbAhDV7SOt1RWAlv6omgQDg0
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
