###
Electron框架
入门教程
#### 什么是
Electron？
Electron 是一个用于构建跨平台桌面应用程序的开源框架，它允许
开发者利用 JavaScript、HTML 和 CSS 创建原生桌面应用。通过嵌入 Chromium 和 Node.js，
Electron 可以让
开发者仅维护一套基于 Web 的代码库，从而实现跨 Windows、macOS 和 Linux 平台的应用程序
开发[^3]。
---
#### 安装与环境准备
要开始使用
Electron，首先需要安装 Node.js 和 npm（Node Package Manager）。可以通过以下命令验证是否已正确安装：
```bash
node -v && npm -v
```
如果尚未安装，请访问官方页面下载最新版本：[Node.js官网](https://nodejs.org/)。
接着，在项目目录下初始化一个新的 Node.js 应用程序，并安装
Electron：
```bash
npm init -y
npm install
electron --save-dev
```
上述操作会创建 `package.json` 文件并将
Electron 添加到项目的
依赖项中[^1]。
---
#### 基本结构
一个典型的
Electron 应用通常包含以下几个文件：
- **main.js**: 这是主进程脚本，负责管理窗口和操作系统之间的交互。
- **index.html**: 渲染界面的内容。
- **renderer.js (可选)**: 渲染进程中使用的逻辑脚本。
下面是一个简单的示例配置：
##### main.js
这是主进程的核心部分，定义了如何启动和关闭应用程序以及创建浏览器窗口。
```javascript
const { app, BrowserWindow } = require('
electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
win.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
```
##### index.html
这是一个基本的 HTML 页面，作为应用的主要视图。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Electron App</title>
</head>
<body>
<h1>Hello from
Electron!</h1>
<p>This is a basic example of an
Electron application.</p>
</body>
</html>
```
---
#### 启动应用
完成以上设置后，可以在 `package.json` 中添加一条启动脚本来简化流程：
```json
{
"name": "my-
electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "
electron ."
}
}
```
随后运行以下命令来启动您的第一个
Electron 应用：
```bash
npm start
```
这将会打开一个带有自定义内容的新窗口[^2]。
---
#### 使用
electron-vite 加速
开发
对于希望提升性能和体验的
开发者来说，可以尝试使用
electron-vite 工具链。该工具旨在提供更快、更精简的
开发体验，主要分为五个模块化组件进行优化[^2]。以下是其快速搭建方法：
```bash
npm create vite@latest my-
electron-project --template vanilla
cd my-
electron-project
npm install
electron @
electron/vite-plugin-main-process-renderer
```
更多细节请参考官方文档或相关资源链接。
---
问题
本文档详细介绍了如何使用Electron框架开发桌面应用程序的过程。包括安装Node.js和Electron、创建项目、配置基本文件（如package.json和main.js），以及启动项目的步骤。
扫一扫
2972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
