1

Structure BasicElectronApp

MangoFanFanw edited this page 2026-03-26 11:05:38 +08:00

Table of Contents

• 基本 Electron 结构
• 创建方式
• 项目结构

基本 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 是我设计的前后端共享的类型和数据的目录。

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

• 百科主页
• 代码启动台
• 结构
  • 基本 Electron 架构
• 方案
  • IDE 检查与版本检查
• 问题
  • IDE 检查与版本检查

FanTools - mangofanfan.cn

芒果工具箱 - 芒果帆帆