电子应用速成指南：Electron-Vite-Vue 实战手册

🚀 电子应用速成指南：Electron-Vite-Vue 实战手册

electron-vite-vue🥳 Really simple Electron + Vite + Vue boilerplate.项目地址:https://gitcode.com/gh_mirrors/el/electron-vite-vue

本手册旨在为开发者提供详尽的指导，以快速上手 Electron-Vite-Vue 这一高效的Electron+Vite+Vue项目模板。通过本指南，您将能够理解项目的核心结构、关键入口文件以及核心配置的设置方式。

1. 项目目录结构及介绍

Electron-Vite-Vue 的架构注重简洁与扩展性，其基本结构如下：

├── electron          # Electron相关的主进程文件夹
│   ├── main.ts       # Electron主进程入口文件
│   └── preload.ts    # 预加载脚本，用于桥接渲染进程和主进程
├── src               # Vue应用源代码
│   └── main.ts       # Vue应用程序入口点
├── index.html        # 应用程序的HTML骨架文件
├── package.json      # 项目配置文件，定义依赖、脚本等
├── vite.config.ts    # Vite构建配置文件
├── gitignore         # Git忽略文件列表
└── ...               # 其它辅助配置文件如npmrc, LICENSE, README.md等

说明：

• electron/main.ts 是Electron的启动点，控制窗口管理等。
• preload.ts 提供了在渲染进程中安全访问Node.js功能的桥梁。
• src/main.ts 是Vue应用的起点，处理Vue应用逻辑。
• index.html 作为Vue应用的宿主页面。
• vite.config.ts 定义了开发与构建时的配置规则。

2. 项目启动文件介绍

electron/main.ts

这个文件是Electron主进程的起点，负责初始化Electron环境，创建或管理窗口。在这里可以监听Electron事件，比如窗口事件、系统事件等，以及调用原生API来增强应用能力。

src/main.ts

虽然命名相似，但此文件属于Vue应用的入口，负责引导Vue框架的启动。它包含了Vue实例的创建和挂载过程，同时也可能是引入应用级插件的地方。

3. 项目配置文件介绍

vite.config.ts

Vite配置文件是该模板中极为重要的一环，它决定了如何构建Vue应用。通过这个文件，您可以配置编译器选项、服务器设置、公共路径、优化分割等。例如，设置入口点、添加插件、调整环境变量等，这些都是通过Vite来灵活定制开发和构建流程的关键。

---

以上是对Electron-Vite-Vue项目一个概览性的介绍，深入学习时，建议参照项目中的具体注释和文档进行实践，以便更好地理解和运用每一个细节。

electron-vite-vue🥳 Really simple Electron + Vite + Vue boilerplate.项目地址:https://gitcode.com/gh_mirrors/el/electron-vite-vue