【保姆级超详细还免费】Electron 项目教程
2026-01-16 09:18:17作者：羿妍玫Ivan
1. 项目的目录结构及介绍
Electron 项目的目录结构通常包含以下几个主要部分：
package.json: 项目的元数据文件，包括依赖、脚本、项目名称等。main.js: 主进程文件，负责创建窗口和管理应用生命周期。index.html: 主窗口的 HTML 文件，用于渲染用户界面。renderer.js: 渲染进程文件，处理用户界面逻辑。node_modules: 存放项目依赖的目录。assets: 存放静态资源，如图片、样式文件等。
electron-project/
├── package.json
├── main.js
├── index.html
├── renderer.js
├── node_modules/
└── assets/
├── styles.css
└── logo.png
2. 项目的启动文件介绍
main.js
main.js 是 Electron 应用的主进程文件，负责创建和管理应用窗口以及处理系统事件。以下是一个简单的 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('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
index.html
index.html 是主窗口的 HTML 文件，用于定义用户界面结构。以下是一个简单的 index.html 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron App</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<h1>Welcome to Electron</h1>
<script src="renderer.js"></script>
</body>
</html>
3. 项目的配置文件介绍
package.json
package.json 是 Node.js 项目的配置文件，包含项目的基本信息和依赖管理。以下是一个简单的 package.json 示例：
{
"name": "electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"dependencies": {
"electron": "^16.0.0"
}
}
.electron-forge
如果使用 Electron Forge 来构建和管理项目，还会包含 .electron-forge 目录，用于配置构建和打包选项。
{
"make_targets": {
"win32": ["squirrel"],
"darwin": ["zip"],
"linux": ["deb", "rpm"]
},
"electronPackagerConfig": {
"packageManager": "npm"
}
}
以上是 Electron 项目的基本结构和配置文件介绍，希望对你理解和使用 Electron 有所帮助。
登录后查看全文
相关内容推荐
热门项目推荐
相关项目推荐
atomcodeClaude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。 ｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get StartedRust0165
LongCat-Video-Avatar-1.5最新开源LongCat-Video-Avatar 1.5 版本，这是一款经过升级的开源框架，专注于音频驱动人物视频生成的极致实证优化与生产级就绪能力。该版本在 LongCat-Video 基础模型之上构建，可生成高度稳定的商用级虚拟人视频，支持音频-文本转视频（AT2V）、音频-文本-图像转视频（ATI2V）以及视频续播等原生任务，并能无缝兼容单流与多流音频输入。00
BitCPM-CANN-8BBitCPM-CANN 是首个基于华为昇腾 NPU 原生构建的端到端 1.58 位（三值化）大语言模型训练系统。该系统将量化感知训练（QAT）集成到 Megatron-LM 框架中，并结合 MindSpeed 加速，覆盖了从自定义三值算子到基于昇腾 910B 的分布式并行训练的完整训练栈。Python00- MiniCPM5-1BMiniCPM5-1B，这是 MiniCPM5 系列的首款模型。它是一个专为端侧、本地部署和资源受限场景打造的 10 亿参数密集型 Transformer 模型，达到了 10 亿参数级开源模型的 SOTA 水平Jinja00
Intern-S2-PreviewIntern-S2-Preview，这是一款高效的350亿参数科学多模态基础模型。除了常规的参数与数据规模扩展外，Intern-S2-Preview探索了任务扩展：通过提升科学任务的难度、多样性与覆盖范围，进一步释放模型能力。Python00
skillhubopenJiuwen 生态的 Skill 托管与分发开源方案，支持自建与可选 ClawHub 兼容。Python0204
热门内容推荐
最新内容推荐
项目优选
收起
docs暂无描述
Dockerfile
740
4.8 K
pytorchAscend Extension for PyTorch
Python
669
811
kernelopenEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
441
401
atomcodeClaude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。 ｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed.
Get Started
Rust
1.39 K
165
ops-math本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
1.01 K
1.03 K
flutter_flutter暂无简介
Dart
994
257
MindSpeed-MM华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。
Python
147
239
MindSpeed-LLM昇腾LLM分布式训练框架
Python
168
203
openHiTLS旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！
C
1.1 K
615
RuoYi-Vue3🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.69 K
997