一.electron框架一般很难下载，使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
二.示例工程目录
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
</head>
<body>
<h1>Hello World!</h1>
We are using node
<script>
document.write(process.versions.node);
</script>
, Chrome
<script>
document.write(process.versions.chrome);
</script>
, and Electron
<script>
document.write(process.versions.electron);
</script>
.
</body>
</html>
main.js
const { app, BrowserWindow } = require("electron");
function createWindow() {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
// 并且为你的应用加载index.html
win.loadFile("index.html");
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow);
//当所有窗口都被关闭后退出
app.on("window-all-closed", () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
初始化项目 yarn init
package.json
{
"name": "my-electron",
"version": "1.0.0",
"description": "测试项目",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "shimon",
"license": "MIT"
}
安装依赖
cnpm install --save-dev electron
启动项目
yarn start