electron创建

electron官网：
https://electronjs.org/docs/tutorial/about

关于electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

electron创建

第一种方式创建

# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start

第二种方式创建：

1. 新建一个空文件夹后，运行npm init --yes，会自动创建package.json的文件，此文件需要微调为如下方式，其中main字段是启动主进程入口。
   如下

{
  "name": "electron1",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",//启动入口文件
  "scripts": {
    "start": "electron ."//此处原先的node修改electron
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

2. 执行如下语句安装electron，则自动添加到package.json的开发依赖项中 “devDependencies”: {
   “electron”: “^7.1.2”
   },

npm install --save-dev electron

3. 新建main.js文件

//electron模块引入
const electron = require('electron');

//创建electron的引用
const app = electron.app;
//创建browserwindow类引用
var BrowserWindow = electron.BrowserWindow;

/**注意
 * electron.app负责管理Electron 应用程序的生命周期
 * electron.BrowserWindow类负责创建窗口
 */

var mainWindow = null;
/**
 *保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
 *垃圾回收的时候，window对象将会自动的关闭
 */

//当准备就绪时，就会创建400*400窗口
app.on('ready', function () {
	var mainWindow = null;

	mainWindow = new BrowserWindow({
		width: 400, height: 400,
		//添加webPreferences属性才能获取node操作，如文件读取
		webPreferences: {
			nodeIntegration: true
		}
	}

	);
	mainWindow.webContents.openDevTools()//打开开发者工具
	mainWindow.loadFile('index.html');//加载本地文件
	//mainWindow.loadURL('http://www.baidu.com')//加载远程文件
	mainWindow.on('closed', () => {
		mainWindow = null;
	})

})

运行结果