📅 发布时间：2026/6/18 18:12:20

【Electron教程】第1节 Electron 简介与环境搭建 - 教程

第1节 Electron 简介与环境搭建

一、引言

‍老曹在这里先跟大家聊聊 Electron 的前世今生。Electron 是一个基于 Node.js 和 Chromium
的跨平台桌面应用开发框架，它使得开发者可以用 JavaScript、HTML 和 CSS 构建出功能强大的桌面应用程序。无论是 VSCode、Slack 还是 Discord，这些耳熟能详的工具背后都有 Electron 的身影。

本节将从零开始带你了解 Electron 的基本概念，并手把手教你搭建开发环境，创建你的第一个窗口应用。同时，我们还会深入探讨重难点，并为你总结 10 大高频面试题及答案，助你在学习和求职中事半功倍！

二、本节内容概览

Electron 是什么？
️ 安装 Node.js 和 Electron
️ 创建第一个窗口应用
⚡ 重难点分析
最佳实践
10 大高频面试题 + 答案

三、 Electron 是什么？

核心概念

Electron 是由 GitHub 开发的一个开源框架，主要用于构建跨平台的桌面应用程序。它通过将 Chromium（负责渲染 UI）和 Node.js（负责后端逻辑）结合在一起，使开发者可以使用 Web 技术栈来编写桌面应用。

主进程：负责管理应用的生命周期和底层操作，例如窗口管理、文件系统访问等。
渲染进程：每个窗口就是一个独立的渲染进程，运行在 Chromium 中，用于处理 UI 渲染。

特点

跨平台支持：一次编写，多端运行（Windows、macOS、Linux）。
丰富的生态：可以直接使用 npm 上的海量模块。
高效开发：前端开发者无需学习新的语言即可快速上手。

️ 四、安装 Node.js 和 Electron

1️⃣ 安装 Node.js

Node.js 是 Electron 的基础运行环境。请按照以下步骤安装：
✅1. 前往 Node.js 官网下载 LTS 版本。
✅2. 安装完成后，验证安装是否成功：

node -v
npm -v

2️⃣ 安装 Electron

安装 Electron 可以通过 npm 全局或局部安装：

npm install electron --save-dev

验证安装是否成功：

npx electron -v

️五、创建第一个窗口应用

项目初始化

✅1. 创建项目目录并初始化：

mkdir my-electron-app
cd my-electron-app
npm init -y

✅2. 安装 Electron：

npm install electron --save-dev

编写代码

在项目根目录下创建 main.js 文件，作为主进程入口：

const { app, BrowserWindow } = require('electron');
let mainWindow;
app.whenReady().then(() => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL('https://www.example.com');
});