摘要：本文详细介绍了如何使用Electron框架开发一个简单的桌面应用程序。从环境准备、项目创建、代码编写到打包发布，提供了完整的开发流程和示例代码，帮助开发者快速上手Electron开发。

1. 准备工作

      确保已安装 Node.js（推荐 LTS 版本，如 18.x 或 20.x）。

node -v
npm -v

2. 创建项目目录

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

3. 安装 Electron

npm install electron --save-dev

4. 创建应用文件

main.js

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false // 安全起见，不开启 Node 集成（可选）
    }
  })

  // 加载本地 HTML 文件
  win.loadFile('index.html')
  // 也可以加载网页：win.loadURL('https://baidu.com')
}

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

  
    
    
    
  
  
    
? Hello from Electron!
    
      这是一个使用 Electron 开发的桌面应用 Demo
  

5. 配置启动脚本

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js",
    "dev": "electron main.js"
  },
  "devDependencies": {
    "electron": "^32.0.0"
  }
}

6. 运行应用

npm start

7. 打包为可执行程序（可选）

1. 安装 electron-builder

npm install electron-builder --save-dev

2. 修改 package.json 添加打包配置

{
  "scripts": {
    "start": "electron main.js",
    "build": "electron-builder"
  },
  "build": {
    "productName": "MyElectronApp",
    "appId": "com.example.myelectronapp",
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

3. 打包应用

npm run build

8. 项目结构总结

my-electron-app/
├── main.js              # 主进程
├── index.html           # 页面
├── package.json
└── node_modules/

9. 小贴士

• Electron = Chromium（渲染网页） + Node.js（访问系统资源）
• 可以使用 React、Vue、Angular 等前端框架构建界面
• 调试方式类似 Chrome DevTools（右键 → 检查）
• 注意安全：避免在渲染进程中启用 `nodeIntegration: true`，除非必要

10. 下一步学习建议

• 学习 Electron 官方文档
• 尝试添加菜单、托盘、系统通知等功能
• 使用 `electron-vite` 或 `Vue Electron Builder` 提升开发效率