创建第一个electron项目

安装

创建package.json

npm init

创建electron

 npm install --save-dev electron

创建程序主入口文件 main.js,electron分为主进程和渲染进程,main,js也可以理解为electron项目的主进程,在主进程中是node环境不可以写操作dom方法,在渲染进程中是浏览器环境可以写操作dom的一些方法
使用nodemon快速启动项目

npm install -g nodemon

package.json文件里面的配置我这里的版本是28,后续博客关于electron的项目也是这个版本

{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js","author": "Jane Doe","license": "MIT","scripts": {"start": "nodemon --exec electron ."},"devDependencies": {"electron": "^28.1.0"}
}

main.js 基本配置

//BrowserWindow 窗口模块
const { app, BrowserWindow } = require("electron");
const path = require("path");
const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 600,height: 600,webPreferences: {preload: path.join(__dirname, "preload.js"),},frame: false, //隐藏标题栏});//每次启动弹出调试框mainWindow.webContents.toggleDevTools();// 加载页面文件mainWindow.loadFile(path.resolve(__dirname, "index.html"));// 加载外部链接// mainWindow.loadURL('https://www.bilibili.com/video/BV1XA411m7Rz?p=7&vd_source=3f2d70e03f43eedd302d3543ad8099b2')// 打开开发工具// mainWindow.webContents.openDevTools()
};

在main.js 中加载了index.html页面,也可以使用在线的url,为了方便开发进行调试可以使用mainWindow.webContents.openDevTools()这个方法打开调试器这样就不用每次手动去点开了

index页面配置

<!--index.html--><!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>你好!</title>
</head><body><h1>1121asdasdasdasd 3!</h1>我们正在使用 Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, 和 Electron <span id="electron-version"></span>.<！-- 您也可以此进程中运行其他文件 --><script src="./renderer.js"></script>
</body></html>