vue3+ts+vite+eletrcon

### 关于 Vue 3、TypeScript、Vite 和 Electron 结合开发项目的资源 #### 创建项目结构 为了创建一个基于 Vue 3、TypeScript、Vite 和 Electron 的项目，首先需要安装必要的依赖项并配置初始设置。通过命令行工具来简化这一过程是一个不错的选择。 在 PowerShell 中执行如下指令可向现有 Vue 项目添加 Electron 构建支持[^2]: ```powershell vue add electron-builder ``` 此操作会自动处理大部分基础配置工作，使得开发者能够专注于业务逻辑而非构建细节上。 #### 配置 vite-plugin-electron 插件 对于希望更深入定制化集成 Vite 和 Electron 应用程序的人来说，`vite-plugin-electron` 提供了一种简便的方法来进行两者之间的桥接[^3]。该插件允许利用 Vite 的快速热更新特性以及其高效的模块解析机制，在不牺牲性能的情况下加速开发流程。 要开始使用 `vite-plugin-electron` ，可以在终端里运行 npm 或 yarn 来安装它： ```bash npm install vite-plugin-electron --save-dev # 或者如果你偏好 Yarn yarn add vite-plugin-electron -D ``` 接着按照官方文档说明调整 `vite.config.ts` 文件中的相应选项以适应具体需求。 #### 示例代码片段展示如何初始化主进程文件(main-process) 下面是一段简单的例子，展示了如何定义一个基本的 Electron 主进程入口点(`main.ts`)，其中包含了启动浏览器窗口的功能: ```typescript import { app, BrowserWindow } from 'electron'; import * as path from 'path'; let mainWindow: BrowserWindow | null; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true, }, }); // 加载渲染进程页面 (通常是 index.html) mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL || `file://${__dirname}/index.html`); // 打开开发者工具（仅限调试） if (!app.isPackaged) { mainWindow.webContents.openDevTools(); } mainWindow.on('closed', () => { mainWindow = null; }); } // 当 Electron 完成初始化并且准备加载浏览器窗口时触发 app.whenReady().then(() => { createWindow(); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); // 处理关闭事件 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); ``` 这段脚本负责管理应用生命周期内的主要活动，比如创建新的浏览实例或者响应操作系统级别的信号等。