前言
electron是一个可以利用 JavaScript HTML CSS 等技术构建原生程序的框架，也就是说，利用electron可以让我们使用web技术来开发桌面应用。electron的GUI核心来自于Chrome，使用V8（JavaScript引擎），本身是基于C++编写的。市面上很多的程序，都是用electron开发的，例如：vscode atom 等。
electron一个很大的特点就是跨平台。electron兼容Windows，Linux以及Mac平台，利用electron开发的程序可以在这几个平台上运行。electron基于chromium，nodejs，这就让你可以用HTML CSS JavaScript构建应用。并且还是开源的，拥有活跃的社区来维护项目。
讲了这么多，现在就让我们来构建第一个属于自己的electron程序吧！
准备
使用electron前，你需要安装nodejs。在终端输入以下命令，来检查nodejs是否安装 :
node -v
npm -v
如果终端返回了相对应的nodejs与npm的版本信息，那么恭喜你，你可以进行下一步了；如果没有返回，那么你则需要安装nodejs与npm，然后重新输入命令检查，再进行下一步。
安装Electron
你可以创建一个名为"electron-app"的文件夹，然后打开它，并在这个文件夹当中执行终端。输入以下命令：
npm init -y
npm i --save-dev electron
Electron的基本目录结构
electron-app/
├── package.json
├── main.js
└── index.html
我们可以通过上面的结构，分别将 package.json main.js index.html 创建出来。
创建main.js
在electron-app目录下创建 main.js 文件（main.js是electron的主脚本文件，它指定了运行主进程electron程序的入口，在electron程序中，只能有一个 main.js 文件），你可以在 main.js 中输入以下代码：
constelectron=require('electron')//导入模块
constBrowserWindow=electron.BrowserWindow
constMenu=electron.Menu
constapp=electron.app
functioncreateWindow() {
constwin=newBrowserWindow({
width:414,//定义窗口行高
height:700,
webPreferences: {
nodeIntegration:true
}
})
win.loadFile('index.html')//将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()
}
})
创建index.html
我们在 main.js 文件当中，将 index.html 文件加载到了窗口当中，那么index.html文件就是窗口的内容了
index.html 文件可以这样写：
Hello World!
Hello World!
这是我的第一个electron程序！