Electron 简介与安装

┌─────────────────────────────────────────────────────────────────┐
│                        Electron 应用                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌─────────────────────┐       ┌─────────────────────┐         │
│  │   主进程 (Main)      │       │  渲染进程 (Renderer) │         │
│  ├─────────────────────┤       ├─────────────────────┤         │
│  │ • Node.js 环境      │ IPC   │ • Chromium 环境     │         │
│  │ • 完整系统权限        │◄────►│ • Web 页面渲染      │         │
│  │ • 原生 API 调用     │       │ • HTML/CSS/JS       │         │
│  │ • 窗口管理          │       │ • DOM API           │         │
│  │ • 应用生命周期      │       │ • 有限的 Node API   │         │
│  └─────────────────────┘       └─────────────────────┘         │
│           │                              │                      │
├───────────┼──────────────────────────────┼──────────────────────┤
│           ▼                              ▼                      │
│  ┌─────────────────────────────────────────────────────┐       │
│  │           底层技术栈                                 │       │
│  ├─────────────────────────────────────────────────────┤       │
│  │ • Chromium: UI 渲染引擎                             │       │
│  │ • Node.js: 系统交互能力                             │       │
│  │ • Native APIs: 操作系统原生功能                     │       │
│  └─────────────────────────────────────────────────────┘       │
└─────────────────────────────────────────────────────────────────┘

# 查看所有可用版本
npm view electron versions
 
# 安装指定版本
npm install electron@28.0.0 --save-dev
 
# 安装最新稳定版
npm install electron@latest --save-dev
 
# 安装 beta 版本
npm install electron@beta --save-dev

# 配置 npm 淘宝镜像
npm config set registry https://registry.npmmirror.com
 
# 配置 Electron 二进制包镜像
npm config set electron_mirror https://npmmirror.com/mirrors/electron/
 
# 配置 Electron Builder 镜像（打包工具）
npm config set electron_builder_binaries_mirror https://npmmirror.com/mirrors/electron-builder-binaries/

# npm 镜像
export npm_config_registry=https://registry.npmmirror.com
 
# Electron 镜像
export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
 
# Electron Builder 镜像
export ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

# 创建项目目录
mkdir my-electron-app && cd my-electron-app
 
# 初始化项目
npm init -y
 
# 安装 Electron
npm install electron --save-dev
 
# 启动应用（需要先创建 main.js 入口文件）
npm start

# 方法1: 临时使用
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ npm install electron --save-dev
 
# 方法2: 永久配置（推荐）
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

# macOS/Linux: 使用 sudo（不推荐）
sudo npm install electron --save-dev
 
# 更好的方案: 修复 npm 权限
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

# 查看本地已安装的 Node.js 版本
nvm list
 
# 安装并切换到 Node.js 18
nvm install 18
nvm use 18
 
# 验证版本
node -v  # 应显示 v18.x.x
npm -v

// main.js
const mainWindow = new BrowserWindow({
  webPreferences: {
    // 启用上下文隔离（Electron 12+ 默认启用）
    contextIsolation: true,
    // 禁用 Node.js 集成（推荐）
    nodeIntegration: false,
    // 启用沙箱
    sandbox: true,
    // 预加载脚本
    preload: path.join(__dirname, 'preload.js')
  }
})

<!-- index.html -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

// preload.js - 验证 IPC 通道白名单
const { contextBridge, ipcRenderer } = require('electron')
 
contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => {
    const validChannels = ['toMain']
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data)
    }
  }
})