2025最新Electron环境搭建，第一个Electron应用【详细教程】

Zy100Papa

已于 2025-04-03 08:54:47 修改

阅读量2.1k

点赞数 6

分类专栏： Electron 文章标签： electron javascript 前端

于 2025-02-10 10:28:24 首次发布

本文链接：https://blog.csdn.net/weixin_41761608/article/details/145544384

版权

Electron 专栏收录该内容

2 篇文章

订阅专栏

1. 先安装Node.js
2. 创建第一个Electron应用

1. 先安装Node.js

官网地址，下载安装即可。https://www.nodejs.com.cn/download.html

安装好后检查下命令行是否可用

文章配图

2. 创建第一个Electron应用

2.1. 设置npm国内镜像

在使用npm初始化项目前，强烈建议将npm源更改到国内镜像源。

由于国内网速问题，直接安装一般会失败。原因是安装electron会从GitHub拉取二进制文件。

淘宝镜像是淘宝团队为国内用户提供的npm镜像源，它与官方镜像源保持同步，并提供了更快的下载速度。

安装淘宝镜像：

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

查看是否安装成功：

npm config get registry

文章配图

2.2. 安装cnpm（按需安装，非必须）

说明： npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。

npm install -g cnpm --registry=https://registry.npmmirror.com

查看是否安装成功

cnpm -v

2.3. 初始化项目


mkdir my-electron-app

cd my-electron-app

npm init -y

初始化完成后，会自动生成package.json项目基础配置

文章配图

2.4. 安装Electron，或者叫安装项目依赖

npm install electron --save-dev

安装好electron后，目录下自动生成node_modules目录，里面存放到electron所用到模块。

文章配图

2.5. 创建基础文件

主进程文件main.js


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



function createWindow() {

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })


  win.loadFile('index.html')
  // win.webContents.openDevTools() // 打开开发者工具
}



app.whenReady().then(createWindow)



app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') {
    app.quit()
  }
})



app.on('activate', () => {

  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

渲染进程文件 index.html：


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">
  <title>Hello Electron!</title>
</head>

<body>

  <h1>Hello Electron!</h1>
  <p>Welcome to your first Electron app</p>
</body>

</html>

修改package.json：
主进程修改为main.js


{

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

运行应用
npm start

至此，我们第一个electron应用就完成了

文章配图