开发Electron程序

久亮哦2025-10-30 14:44

需要先下载安装node

windows下安装，先下载msi，然后一键安装，https://nodejs.org/en/download

然后cmd 创建一个文件夹

bash 复制代码

mkdir my-electron-app && cd my-electron-app

安装Electron

bash 复制代码

npm install electron --save-dev

安装完之后，npm init 初始化项目

bash 复制代码

npm init

初始化完 Electron 之后，会出现一个 node_modules 文件夹，其中包含了 Electron 可执行文件

一个 package.json，指定了各个依赖的确切版本

bash 复制代码

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "index.js",
  "scripts": {
  "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "久亮",
  "license": "ISC",
  "devDependencies": {
    "electron": "^39.0.0"
  }
}

然后可以创建一个 index.js 文件，内容如下

bash 复制代码

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

再创建一个index.html，内容如下

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>

就搞定了

然后在CMD中输入：

html 复制代码

npm run start

就可以看到第一个Electron程序运行成功！