新建electron项目
1.新建文件夹:
新建文件夹并且进入
2.初始化项目
cnpm init
3.修改package.json文件
{
"name": "el_hello",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//启动配置
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^10.1.2",
"electron-packager": "^15.1.0"
}
}
4.新建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')
}
app.whenReady().then(createWindow)
5.新建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>
6.运行
cnpm run start
7.打包
cnpm install electron-packager -g //全局安装打包工具
electron-packager . //最简单的打包命令
问题:打包工具下载包很慢
解决:
1.设置环境变量
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/