对Electron的接触也有一段时间了，大概是3个月，但仅仅是只是接触，并没有完全地深入学习，在网上找到的Electron教程少之又少，满地的HelloWorld看得心力交瘁，作为一名设计师，因为只懂前端的一些皮毛，对于逻辑层和底层业务开发完全是小白中的小白，在这里记录我的学习历程，分享一些学习经验，有像我一样从0开始学习编程的，可以相互学习。
学习electron，环境搭建这里就不详细赘述了，网上搜索electron一大把，所以简单讲述一下就好了,开发环境win10，开发工具VScode。
① 环境 & 开发工具
安装运行环境 【NodeJS】下载地址：https://nodejs.org/en/
安装开发工具【VScode】下载地址：https://code.visualstudio.com/
② 镜像工具安装
打开控制台【cmd】安装npm的淘宝镜像cnpm（可以翻墙的就不用安装了）
npm install -g cnpm --registry=https://registry.npm.taobao.org③ electron运行环境安装
安装electron
cnpm install -g electron④ electron模板下载
下载electron快速搭建模板
https://github.com/electron/e...
⑤ 运行electron模板
解压到英文路径里，例如 D:develectron,打开控制台cmd
cd D:\dev\electron查询对应的环境和版本，确定都正常即可继续
解压electron-quick-start的文件结构
在控制台输入
npm start 
OK，已经跑起来了，这是万里长征的0.0000001步，完全可以忽略不记。
⑥ VScode的使用
接下来我们去到VScode来观察代码。
后面我们直接在VScode调试即可，菜单栏打开 终端->新建终端，底部出现powershell的控制台窗口，方便命令操作。
⑦ 模板代码了解
有网页设计相关知识的，对入门还是有帮助的，如果不懂HTML，CSS，Javascript，我推荐还是先找一些免费的课程学习一下。假定你跟我一样，懂一些相关知识，我们继续往下学习和了解。
以上截图的4个标签对应的文件是全村的核心文件，开发electron都是根据这几个进行扩展的。
#package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^7.1.0"
}
}package.json存储的是整个app的基本信息，就跟我们的个人介绍是一样的，可以细读一下，了解都包含些什么信息。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
index.html和renderer.js是渲染层，也就是我们能看得见的层级，基本的视觉和交互操作都在这里编写。
// main.js
// 引入electron的app和BrowserWindow模块
const {app, BrowserWindow} = require('electron')
// 引入nodejs的path模块，用来处理文件路径
const path = require('path')
// 声明主窗体
let mainWindow
// 创建窗体函数
function createWindow () {
mainWindow = new BrowserWindow({
// 窗体属性很多，自己去了解一下https://electronjs.org/docs/api/browser-window#new-browserwindowoptions
width: 800, // 宽度800
height: 600, //高度600
webPreferences: { // 网页功能，如预加载等可以附加进来，没有也没关系，一般在软件优化可以用上
preload: path.join(__dirname, 'preload.js') // 预加载一些程序，提高运行效率
}
})
// 主窗体载入网页，窗体相当于简化版的chrome浏览器
mainWindow.loadFile('index.html')
// closed就是关闭之后，当主窗体关闭之后，执行代码，将窗体置为null
mainWindow.on('closed', function () {
mainWindow = null
})
}
// app是这个应用程序的事件生命周期，每个周期可执行相应代码，如ready了之后要干嘛，activate之后要干嘛
// 这个我们去看electron的文档比较明了，连接https://electronjs.org/docs/api/app
app.on('ready', createWindow) // app触发【准备好】的时候，创建窗体
// app触发【窗体都关闭了】执行app退出命令
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// app触发【激活，活动中】的时候，保持主窗体显示
app.on('activate', function () {
if (mainWindow === null) createWindow()
})main.js 是主进程，相当于后台控制程序，这部分是electron的核心部分，后期学习的难点也是在这部分。以上都做了注释，可以细看一下。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。