Electron是一款使用Html、Css、JS开发跨平台桌面应用的框架。
话不多说直接开搞。
必坑指南：
- node版本>=18.0
- 使用淘宝镜像安装
npm相关包； - 把下面两行配置放到你的
npmrc文件中electron_mirror=https://npm.taobao.org/mirrors/electron/ ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
创建项目
使用下面命令创建一个空项目
mkdir electron-demo && cd electron-demo
npm init
安装electron依赖包，等待安装完成
cnpm install --save-dev electron
写代码
创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="hello"></h1>
</body>
</html>
创建preload.js，会在应用加载渲染进程之前执行这个文件的代码
// dom内容加载成功的监听
window.addEventListener('DOMContentLoaded', () => {
// 加载页面成功之后设置元素的内容
const element = document.getElementById('hello')
element.innerText = 'Hello,Electron!'
})
创建main.js，整个项目的入口js文件
const { app, BrowserWindow } = require('electron')
const {join} = require("path");
// 创建应用窗口
const createWindow = () => {
const win = new BrowserWindow({
// 窗口尺寸
width: 800,
height: 600,
webPreferences: {
// 设置渲染前执行的js文件
preload: join(__dirname, 'preload.js')
}
})
// 加载的html文件
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
启动项目
修改package.json
设置入口js文件
"main": "main.js",
设置启动脚本
"scripts": {
"start": "electron ."
},
执行脚本
npm start
正常情况会出现下面这个窗口
![[PyTorch][chapter 51][Auto-Encoder -1]](https://img-blog.csdnimg.cn/ad287288c7c942129815f6fced4716db.png)
