Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架。下面的步骤会指导你如何从零开始初始化一个新的Electron项目。
测试运行环境
nodejs 16
测试electron实践版本
electron ^29.0.1
1. 安装Node.js
确保你的系统上已安装了Node.js。如果没有，请从Node.js官网下载并安装它。Node.js会自带npm（Node包管理器），这对于管理项目的依赖非常有用。
2. 创建项目文件夹
在你选择的位置创建一个新的文件夹，并命名为你的项目名。然后，打开命令行或终端，进入该文件夹：
mkdir my-electron-app
cd my-electron-app
3. 初始化项目
在项目文件夹中，运行以下命令初始化一个新的Node.js项目：
npm init
该命令会提示你输入项目的一些详细信息。你可以根据提示输入，或者接受默认设置。
4. 安装Electron
现在，你可以通过npm安装Electron作为项目的依赖：
npm install electron
5. 创建主文件
在项目的根目录下创建一个名为main.js的文件。这将是Electron的主进程文件。你可以在这个文件中添加以下代码：
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
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();
}
});
6. 创建HTML文件
创建一个名为index.html的文件，其中包含你的应用程序的HTML代码。例如：
<!DOCTYPE html>
<html>
<head>
<title>我的Electron应用</title>
</head>
<body>
<h1>欢迎使用Electron!</h1>
</body>
</html>
7. 更新package.json
在package.json文件中，修改main字段为main.js，并在scripts字段下添加一个启动脚本：
{
"main": "main.js",
"scripts": {
"start": "electron ."
},
...
}
8. 运行应用
现在，你可以通过以下命令启动Electron应用：
npm start
这会启动Electron，并显示你在index.html文件中定义的内容。
9. 进一步开发
从这里开始，你可以继续添加更多的JavaScript、HTML和CSS来开发你的应用，以及导入更多的Node.js模块和Electron API来增强功能。
