Electron + Vue3 + Vite 开发桌面应用：环境搭建

Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用的开源框架。Vue3 是 Vue 的最新版本，提供了更强大、灵活的 API。Vite 则是一个快速、现代化的前端构建工具，支持 Vue3 和其他现代框架。

下面我们将分步骤介绍如何使用 Electron、Vue3 和 Vite 搭建开发环境：

步骤一：安装 Node.js 和 npm

首先，你需要安装 Node.js 和 npm。你可以从 Node.js 官网下载安装包，并按照提示进行安装。确保在命令行中输入 node -v 和 npm -v，能够看到相应的版本信息。

步骤二：安装 Electron

在你的项目根目录下，打开命令行窗口，输入以下命令来安装 Electron：

npm install electron --save-dev

步骤三：创建 Vite 项目

使用 Vite 可以快速创建一个新的 Vue3 项目。在命令行中输入以下命令：

npm init vite@latest my-electron-app -- --template vue-ts

其中 my-electron-app 是你的项目名称，--template vue-ts 表示使用 Vue3 和 TypeScript 模板。

步骤四：进入项目目录并安装依赖

在命令行中输入以下命令，进入项目目录并安装依赖：

cd my-electron-app
npm install

步骤五：创建 Electron 主进程文件

在项目根目录下创建一个名为 main.js 的文件，这是 Electron 的主进程文件。你可以在这个文件中编写 Electron 的主进程代码。以下是一个简单的示例：

const { app, BrowserWindow } = require('electron')
const path = require('path')
const isDev = require('electron-is-dev')
const { createMainWindow } = require('./src/windows/main-window')
let win = null
let mainWindowState = null
let restoreMainWindowState = null
let restoreWindowStateTimeout = null
let mainWindow = null
let shouldQuit = false
let isQuitting = false
let isRestoring = false
let isWindowVisible = true
let isWindowFocused = true
let isWindowMaximized = false
let isWindowMinimized = false
let isWindowOnCurrentWorkspace = true
let isWindowInTray = false
let trayIconEl = null
let trayMenu = null
let trayTitle = ''
let trayTooltip = ''
let trayTemplate = null
let trayTemplateIconPath = null
let trayTemplateTitle = null
let trayTemplateTooltip = null
let trayTemplateIconPathDisconnected = null
let trayTemplateTitleDisconnected = null
let trayTemplateTooltipDisconnected = null
let trayTemplateIconPathDisconnectedSize = null
let trayTemplateTitleDisconnectedSize = null
let trayTemplateTooltipDisconnectedSize = null