electron-vite-vue项目的创建

### 创建 Electron-Vite-Vue 项目 创建一个基于 Electron、Vite 和 Vue 的项目需要经过几个关键步骤，包括初始化项目环境、安装必要的依赖以及配置打包工具。以下是详细的说明： #### 1. 初始化项目 使用 Vite 提供的命令行工具来创建一个新的 Vue 项目，并选择合适的模板。 ```bash npm create vite@latest my-electron-vue-app --template vue ``` 进入项目目录并安装基础依赖： ```bash cd my-electron-vue-app npm install ``` [^1] #### 2. 安装 Electron 相关依赖 为了支持 Electron 应用开发，需要安装以下依赖项： - `electron`：Electron 核心库。 - `electron-builder`：用于打包和分发 Electron 应用。 - `vite-plugin-electron`：为 Vite 提供 Electron 支持的插件。 - `concurrently`：同时运行多个脚本的工具。 执行以下命令安装上述依赖： ```bash npm install electron electron-builder --save-dev npm install vite-plugin-electron concurrently --save-dev ``` [^1] #### 3. 配置 Vite 插件 在项目的 `vite.config.js` 文件中添加对 `vite-plugin-electron` 的支持。例如： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' export default defineConfig({ plugins: [ vue(), electron({ entry: 'electron/main.ts', // 主进程入口文件 }), ], }) ``` [^3] #### 4. 配置 Electron 主进程 创建主进程文件 `electron/main.ts`，定义 Electron 应用的基本行为。例如： ```typescript import { app, BrowserWindow } from 'electron' let mainWindow: BrowserWindow | null = null app.whenReady().then(() => { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: './preload.js', }, }) mainWindow.loadURL('http://localhost:3000') // 加载 Vue 应用 }) ``` [^2] #### 5. 配置打包工具 在 `package.json` 中添加打包命令，例如： ```json "scripts": { "dev": "vite", "build": "vite build", "electron:build": "electron-builder" }, "build": { "appId": "com.example.electron-vue", "directories": { "output": "dist" }, "files": [ "dist/**/*", "node_modules/**/*", "package.json" ] } ``` [^2] #### 6. 替换下载源（可选） 如果遇到下载速度慢的问题，可以更换国内镜像源。编辑或创建 `.npmrc` 文件，添加以下内容： ```text electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/ electron_custom_dir={{ version }} electron_mirror=https://cdn.npmmirror.com/binaries/electron/v registry=https://registry.npmmirror.com/ ``` [^4] #### 7. 打包应用 完成所有配置后，可以运行以下命令进行打包： ```bash npm run electron:build ``` [^5] --- ###