Electron是一个强大的框架，它允许开发者使用Web技术（HTML、CSS和JavaScript）来构建跨平台的桌面应用程序。在本系列文章中，我们将通过electron-vite脚手架来学习如何从头开始构建一个Electron应用程序。electron-vite集成了Vite的快速构建能力和Electron的跨平台特性，使得开发过程更加高效。
-
安装electron-vite： 首先，你需要安装electron-vite。electron-vite提供了Vue和React模板供你选择。使用pnpm（或npm）来创建一个新的Electron应用程序，这里我们以Vue模板为例：
pnpm create @quick-start/electron my-app --template vue这个命令会创建一个名为my-app的新目录，其中包含了使用Vue模板的electron-vite项目结构。更多安装选项和流程，请参考electron-vite的官方文档。
-
运行项目： 进入项目目录，你可以使用以下命令来启动Electron应用：
cd my-app npm run dev这个命令会启动Vite开发服务器，并且使用Electron来打开一个窗口，显示你的应用程序界面。
-
打包项目： 当你的应用程序开发完成后，你可以将其打包为可执行文件。electron-vite提供了针对不同平台的打包命令：
# 打包Windows版本 npm run build:win # 打包macOS版本 npm run build:mac这些命令会生成对应平台的安装包，你可以将其分发给最终用户。
-
目录结构分析：
electron-vite项目的基本目录结构如下：
- github：用于GitHub Action发布流程的配置文件。
- resources：存放公共资源，如图标、可执行程序、wasm文件等。
- dist：制品目录，打包后生成，通常可以忽略。
- src：源码目录，包含主进程、预加载脚本和渲染进程的代码。
- main：主进程目录，包含electron的主进程代码。
- preload：预加载脚本目录，用于在渲染进程加载前运行，可以安全地向渲染进程注入Node.js功能。
- renderer：渲染进程目录，包含Vue项目的前端代码，如组件、视图和样式。
- electron.vite.config.js：vite配置文件，用于配置Vite和Electron的构建选项。
- electron-builder.yml：electron打包设置，用于配置打包过程和安装包的细节。
- package.json：项目依赖和脚本配置文件。
通过上述步骤，你已经成功搭建了一个基于electron-vite的Electron应用程序，并且了解了如何运行和打包你的项目。在下一篇文章中，我们将深入探讨Electron技术栈的组成，以及如何利用这些技术来开发功能丰富的桌面应用程序。
