阅读前建议先预习了解官方文档中的开始上手、Tutorial模块、Processes in Electron。我们了解了Electron中的渲染进程和主进程的区别后，明白了启动一个Electron本身就启动了一个Chrome浏览器，其中渲染进程负责页面的渲染以及一些前端的交互。而当我们需要处理一些NodeAPI以及本地功能后我们需要通过IPC的方式，和主进程通信并由主进程处理和Nodejs的相关交互Electron交互方式)。
起步
从零开始开发是很困难的，甚至一开始我都纠结过该如何设置目录结构。当然最好的解决方案便是拿来主义，我找了几个GitHub上高星的项目模板并且经过尝试后我决定使用这位大佬开源的模板（ArcherGu/fast-vite-electron: Vite + Electron with esbuild, so fast! ⚡ (github.com)）。首先他原生组合好了vite、electron同时也提供了一个ipc通信的Demo（当然我们决定不使用他）。同时esbuild的速度相比webpack的dev调式效率高出了不止一个数量级也十分方便我们试错。
拉取并运行这个模板
打开模板的地址ArcherGu/fast-vite-electron: Vite + Electron with esbuild, so fast! ⚡ (github.com)，随后可以选择Use this template，当然在这里我使用了git clone命令。拉取后通过vscode打开这个模板，我们可以发现有一个pnpm.lock的文件，因此我们可以使用pnpm install安装该项目的依赖。
执行pnpm install如果没有安装pnpm则可以执行npm i -g pnpm来安装。（个人也比较推荐通过pnpm来构建依赖包具体原因可参考，简单说他通过symbol link的方式即不需要想yarn一样平铺，也不会想npm由于过程的层级导致出现错误）
npm依赖包安装完成后我们可以打开package.json，看到script中有dev命令，故执行pnpm dev命令，让我们看下模板默认实现的功能
可以看到demo界面是一个简单的IPC通讯功能，模板的作者引入了自己编写的einf（一个进程间通讯的框架），但是在这里我们决定听过electron文档中给出的建议直接使用原生编写。
目录结构
上面我们已经成功的启动了这个模板，接下来我们来看下这个模板的目录结构，以及我们需要添加/修改一些什么内容吧。
整个目录由main、render、preload三个目录构成。其中render代表渲染器其中目录的文件也是我们非常熟悉的Vue APP的常见结构，而上面的main则是electron的主进程文件存放的地方了（这里主要是放一些和nodejs交互的api），而preload则是主进程与渲染进程的桥接层，通过preload的contextBridge可以让渲染进程访问主进程的一些API。
因此通过上面的结构我们可以简单的理解成，原有web相关的代码我们需要卸载render的目录下。而一些操作系统的交互，系统内部的功能逻辑等应当卸载main目录下。而对于render到main之间的通信内容应当写在preload下。
