当前位置：首页 > news >正文

开发Electron程序

news 2025/10/29 9:54:43

需要先下载安装node

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

然后cmd 创建一个文件夹

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

安装Electron

npm install electron --save-dev

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

npm init

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

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

{"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 文件，内容如下

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，内容如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'"/><metahttp-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中输入：