Table of Contents

基本 Electron 结构

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

基本 Electron 结构

如果你也想整一个 Electron 应用，可以看看这里。

当然，光看这里是不够的，Electron 自己的文档你也得看。

创建方式

芒果工具箱是使用 Electron Forge 创建的。大概来说，项目的起点是这一行命令：

npx create-electron-app@latest my-app --template=vite-typescript

在此基础上，再安装了 Vue 和 NaiveUI 作为前端框架。

你看，起步其实并不难。

项目结构

src 是源代码目录，其中包含四个子目录，其中三个是 Electron Forge 作为模板创建的。

main 是 Electron 后端的源代码目录，运行在 Nodejs 环境中；
preload 是一些预加载脚本，用来在后端 Nodejs 运行的代码与前端 BrowserWindow 中运行的代码间架起桥梁；
renderer 是在前端、BrowserWindow 中运行的代码，环境是现代浏览器（Chromium）；
my-type 是我设计的前后端共享的类型和数据的目录。

这就是基本结构了，现在你应该了解哪边的代码都在哪里了。

FanTools - mangofanfan.cn

芒果工具箱 - 芒果帆帆