一、electron-quick-start 是什么？

它是 Electron 官方维护的最简入门项目，没有多余封装、没有复杂依赖，只保留最核心的 3 个文件，专门用来帮你：

• 快速验证 Electron 环境
• 理解主进程 / 渲染进程
• 作为新项目的干净起点

一句话：clone → install → start，直接看到窗口运行。

---

二、环境准备（1 分钟）

只需要两个东西：

1. Node.js（建议 LTS 版本，自带 npm）
2. Git（可选，用来 clone 仓库）

检查是否装好：

node -v
npm -v
git --version

---

三、一键启动你的第一个 Electron 应用

打开终端，逐行执行：

# 1. 克隆官方模板
git clone https://github.com/electron/electron-quick-start

# 2. 进入目录
cd electron-quick-start

# 3. 安装依赖
npm install

# 4. 启动应用
npm start

不出意外，立刻弹出一个桌面窗口，你的第一个 Electron 应用就跑起来了。

---

四、核心文件结构（看懂就学会一半）

项目极简到不能再简，只有这几个关键文件：

electron-quick-start/
├── package.json    # 项目配置、入口、脚本
├── main.js         # 主进程：创建窗口、管理生命周期
├── index.html      # 渲染进程：页面UI
├── preload.js      # 安全预加载脚本
└── renderer.js     # 页面交互逻辑

1. package.json（最重要）

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "main": "main.js",        // 必须指定主进程入口
  "scripts": {
    "start": "electron ."  // 启动命令
  }
}

2. main.js（主进程）

负责创建窗口、控制应用生命周期，是整个应用的 “大脑”。

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 加载页面
  mainWindow.loadFile('index.html')
}

// 启动后创建窗口
app.whenReady().then(() => {
  createWindow()
})

3. index.html（渲染进程）

就是普通网页，写界面、样式、交互，和写 Web 一样。

---

五、常用小修改（立刻上手开发）

• 改窗口大小：调整BrowserWindow里的width/height
• 改标题：修改<title>或用mainWindow.setTitle()
• 加菜单 / 快捷键：在main.js里扩展Menu模块
• 打开控制台：mainWindow.webContents.openDevTools()

改完保存，关闭窗口重新执行 npm start 即可生效。

---

六、常见问题（新手必看）

1. npm install 很慢 / 失败用淘宝镜像：

   npm config set registry https://registry.npmmirror.com
   

2. 启动报错：Electron failed to install删掉node_modules和package-lock.json，重新npm install
3. 修改代码不自动刷新可以安装electron-reloader实现热重载

---

七、下一步：从模板到真实项目

跑通 quick-start 只是开始，你可以：

• 用 Vue/React/Angular 替换原生 HTML
• 用electron-builder或electron-forge打包成 exe/dmg
• 调用系统能力：文件读写、托盘、弹窗、剪切板等

---

总结

electron-quick-start是 Electron 世界最友好的敲门砖，没有之一。它用最少的代码，把跨平台桌面应用的核心流程全部展示清楚。

只要会前端三件套，你已经拥有了开发桌面软件的能力。