Electron开发环境部署指南
安装Node.js和npm
- 确保系统中安装了Node.js，因为Electron依赖于Node.js环境。可以从Node.js官网下载并安装。
- Node.js的安装包通常会附带npm（Node Package Manager），用于管理JavaScript包。
初始化项目
- 在终端或命令提示符中，创建新目录作为项目文件夹。
mkdir my-electron-app cd my-electron-app - 使用npm初始化项目，这会创建一个package.json文件。
npm init -y
安装Electron
- 使用npm安装Electron为开发依赖项。
npm install electron --save-dev
配置package.json文件
- 在package.json中添加启动脚本以便于快速启动应用程序：
"scripts": { "start": "electron ." }
创建入口文件
- 在项目目录下创建一个主进程的入口文件，通常命名为
main.js，并编写基本的Electron应用代码：const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); win.loadFile('index.html'); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } });
## 创建HTML页面
- 新建一个`index.html`文件，用于展示内容:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
</body>
</html>
启动应用程序
- 在终端中运行以下命令以启动你的Electron应用：
npm start调试与问题排查
- 使用开发者工具进行调试：在窗口中按
Ctrl + Shift + I打开开发者工具。 - 检查控制台中的错误信息，以定位问题。
通过按照上述步骤，你可以成功地设置并运行一个简单的Electron应用开发环境。根据具体需求，可以继续扩展功能、优化性能，以及进行跨平台打包等操作。
配置模板
- qql2 github中有