创建 Electron-Vite 应用指南

一、项目目录结构及介绍

本部分将详细介绍从GitHub仓库 electron-vite/create-electron-vite.git 克隆得到的项目结构及其各部分的功能说明。

.
├── public                  # 静态资源文件夹，比如 favicon.ico，index.html 等。
├── src                     # 源代码主目录
│   ├── main.js             # 主进程入口文件，控制应用生命周期等。
│   └── preload.js         # 预加载脚本，运行在渲染进程上下文，允许安全地访问 Node.js API。
├── package.json            # 包含项目元数据，scripts定义了各种npm命令
├── vitest.config.ts        # Vite 测试配置文件
├── electron-builder.yaml   # 用于Electron应用打包的配置文件
└── README.md               # 项目说明文档

二、项目的启动文件介绍

main.js

• 功能: main.js 是 Electron 应用程序的主进程入口文件。它负责初始化Electron环境，创建窗口对象，以及管理应用程序的整个生命周期。在这份脚本中，你可以指定应用程序的基本设置，如窗口尺寸、菜单条目、事件监听等。启动应用时，Electron首先执行此文件中的代码。

preload.js

• 功能: 虽然不是直接的启动文件，但preload.js在每个渲染进程加载前被注入。这个脚本主要用于桥接主进程和渲染进程的安全通信，以及提供对Node.js API的受限访问。这对于实现特定于页面的功能很有用，同时也增强了安全性，限制了直接的Node.js访问权限。

三、项目的配置文件介绍

package.json

• 作用: 此文件是Node.js项目的配置中心，包含了项目的描述信息（名称、版本、作者等），依赖项列表，以及一系列预定义的脚本命令，例如start用来启动开发服务器，build用于构建应用，pack或dist通常是用于打包装发布。

vitest.config.ts

• 作用: 这是Vitest测试框架的配置文件，定义了如何进行单元测试和端到端测试的规则，包括源代码路径、测试匹配规则、转译选项等，确保你的代码质量。

electron-builder.yaml

• 作用: 当准备将你的Electron应用部署到不同平台时，electron-builder.yaml文件扮演着关键角色。它包含了详细的构建参数，比如目标平台（Windows, macOS, Linux）、图标路径、版本号策略等，指导Electron Builder如何打包你的应用成可安装的格式。

以上是对基于Electron-Vite的项目关键组成部分的简要说明，通过理解和配置这些文件，开发者可以高效地开发和部署跨平台的应用程序。