Electron环境搭建
Posted 沿着路走到底
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Electron环境搭建相关的知识，希望对你有一定的参考价值。
官网：Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.
初始化项目目录
安装 electron
npm i electron -Dmain.js
const app, BrowserWindow = require('electron')
// 当 app 启动之后，执行窗口创建等操作
app.whenReady().then(() =>
// 创建主进程
const mainWin = new BrowserWindow(
width: 600,
height: 400,
)
// 在当前窗口中加载指定界面让它显示具体的内容
mainWin.loadFile('index.html')
mainWin.on('close', () =>
console.log('close')
)
)
app.on('window-all-closed', () =>
console.log('window-all-closed')
app.quit()
)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document - Electron</title>
</head>
<body>
<h2>我的桌面应用</h2>
</body>
</html>package.json
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts":
"test": "echo \\"Error: no test specified\\" && exit 1",
"start": "electron ."
,
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies":
"electron": "^16.0.8"
启动项目
npm start项目启动成功
1
以上是关于Electron环境搭建的主要内容，如果未能解决你的问题，请参考以下文章