河北中凯建设有限公司网站知名企业门户网站建设
Electron 是一个由 GitHub 开发并开源的框架，允许开发者使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。它结合了 Chromium 引擎和 Node.js，使得开发者可以轻松地将 Web 应用程序转换为原生桌面应用。
Electron 支持 Windows、macOS 和 Linux 三大主流操作系统，开发者只需编写一次代码即可在多个平台上运行，同时可以直接复用现有的前端技术栈和工具链（如 React、Vue、Angular 等），轻松集成各种npm包，它还内置 Chrome DevTools，开发者可以直接调试界面和逻辑，提高开发效率。
不过Electron也存在明显缺陷，Electron 应用通常包含整个 Chromium 引擎和 Node.js 运行时，导致生成的应用程序体积较大，每个 Electron 应用都运行在一个独立的Chromium实例中，因此内存占用较高，所以并不适用于对性能要求极高及对资源占用敏感的应用
准备操作
Electron 基于 Node.js，因此需要先安装Node.js和 npm（Node 包管理器）。安装完成后在cmd中输入检查下是否安装成功：
node -v
npm -v
在使用npm时，有时会因为网络问题导致安装依赖包的速度很慢，为了提高效率，可以将npm的默认源切换为国内的镜像源npm切换为国内镜像源，在终端中输入以下命令即可切换为阿里巴巴的国内镜像：
npm config set registry https://registry.npmmirror.com
切换完成后再输入命令检查下是否切换成功：
npm config get registry
如果想要在多个镜像源中切换，可以在终端里全局安装使用nrm：
npm install -g nrm
nrm ls
这样就可以看到可用的镜像源列表了
随后我们再找到萨满问问米，使用命令挑选一个吉利的镜像源：
nrm use taobao
准备就绪后我们新建一个文件夹，比如：
mkdir ggbond_app
进入文件夹：
cd ggbond_app
使用命令初始化项目：
npm init -y
命令执行后在项目文件夹中会出现配置文件package.json
内容大体如下：
{"name": "ggbond_app","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}
这里将程序入口设定为index.js，我们可以自行更改，比如更改为main.js：
"main": "main.js"
接下来安装electron到项目中:
npm install electron --save-dev
下载后的electron文件保存在node_modules里
接下来安装构建工具electron-builder，用来将我们的代码打包为应用程序:
npm install electron-builder --save-dev
同样，下载后的electron-builder文件保存在node_modules里面。
构建基础应用
以上步骤完成后，我们先新建一个main.js文件，这个是主程序代码，在里面添加以下内容：
const {app, BrowserWindow} = require('electron');let win = null;function createWindow() {win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}});win.loadFile('index.html');win.on('closed', () => {win = null;});
}app.on('ready', createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});
在这行代码中我们将主程序页面指定为了index.html:
win.loadFile('index.html');
接下来新建index.html，我这里将CSS单独放置到一个style.css文件中：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>GGBond勇猛无敌</title>
</head>
<body><h1>Hello GGBond</h1>
</body>
</html>
style.cssCSS文件内容:
body {background-color: #000;font-family: 'Roboto', sans-serif;font-size: 16px;line-height: 1.5;color: #333;margin: 0;padding: 0;overflow-x: hidden;overflow-y: scroll;
}h1 {font-size: 2em;margin-bottom: 0.5em;text-align: center;font-weight: bold;color: white;text-shadow: 0 0 15px red, 0 0 30px blue, 0 0 45px red, 0 0 60px blue;animation: breathe 3s infinite alternate;
}@keyframes breathe {from {transform: scale(1);}to {transform: scale(1.1);}
}
完成后的项目结构如下：
再次修改package.json，在scripts中添加启动命令：
"start": "electron ."
完整的package.json如下：
{"name": "ggbond_app","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron ."},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^35.0.0","electron-builder": "^25.1.8"}
}完成后我们再项目根目录中输入命令即可启动我们的Electron应用：
npm start
这样一个最为基础的Electron桌面应用构建完成，接下来可以Happy的敲码搞定其他功能了。
