electron+vite+vue3+ts

首先需要安装一些依赖： ```bash npm install electron electron-context-menu vite vue@next vue-router@next @vue/compiler-sfc typescript tslib --save-dev ``` 然后在 `src` 目录下新建 `main.ts` 和 `renderer.ts` 两个文件。 `main.ts` 的内容如下： ```ts import { app, BrowserWindow, Menu } from 'electron'; import path from 'path'; import contextMenu from 'electron-context-menu'; // 创建窗口 function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { // 允许使用 node.js nodeIntegration: true, // 允许使用 Electron 的 remote 模块 enableRemoteModule: true, // 允许在渲染进程中使用上下文菜单 contextIsolation: false, }, }); // 加载页面 win.loadFile(path.join(__dirname, '../renderer/index.html')); // 打开开发者工具 win.webContents.openDevTools(); // 设置窗口菜单 const template = [ { label: '菜单1', submenu: [ { label: '子菜单1', click: () => { console.log('点击了子菜单1'); }, }, { label: '子菜单2', click: () => { console.log('点击了子菜单2'); }, }, ], }, { label: '菜单2', click: () => { console.log('点击了菜单2'); }, }, ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu); } // 当 Electron 初始化完成并准备好创建窗口时调用这个函数 app.whenReady().then(() => { // 注册上下文菜单 contextMenu({ window: BrowserWindow.getFocusedWindow(), showInspectElement: true, }); createWindow(); // 如果所有窗口都关闭了，退出应用 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); }); // 在 macOS 上，当单击 Dock 图标并且没有其他窗口打开时，重新创建一个窗口 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` `renderer.ts` 的内容如下： ```ts import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 接下来在 `src` 目录下新建 `index.html` 文件，并且在里面添加一个 `div` 元素，并且指定它的 `id` 为 `app`。同时在 `body` 元素下添加如下代码： ```html <script src="./renderer.js"></script> ``` 最后在 `package.json` 中添加如下脚本： ```json { "scripts": { "start": "vite", "build": "vite build", "electron": "electron ." } } ``` 现在可以运行 `npm run start` 来启动应用程序，然后运行 `npm run electron` 来启动 Electron 应用程序。现在你应该已经能够看到一个 Electron 窗口，并且它包含一个菜单。如果你右键单击窗口，你应该能够看到一个上下文菜单。

### 使用 Electron、Vue 和 Vite 搭建项目的指南 #### 项目初始化 为了创建一个新的 Electron 应用程序并集成 Vue 和 Vite，可以利用 `create-electron-app` 或者手动设置。对于更便捷的方式，推荐使用预配置的模板或者脚本工具来简化这一过程[^1]。 ```bash npm init vite@latest my-electron-vue-app --template vue cd my-electron-vue-app npm install electron --save-dev ``` 这段命令会通过 Vite 创建一个基础的 Vue 项目结构，并安装 Electron 作为开发依赖项。 #### 配置文件调整 接下来，在根目录下添加或修改必要的配置文件以支持 Electron 的运行模式： - **main.js (or main.ts)**: 定义主进程逻辑； - **vite.config.js**: 设置 Vite 编译选项以便兼容 Electron 渲染器线程的需求； 例如，在 `vite.config.js` 中可能需要指定公共路径和其他特定于平台的参数[^2]: ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], base: './', // 确保资源加载正确 }) ``` #### 启动应用 完成上述步骤之后，可以通过自定义 npm 脚本来启动应用程序。编辑 package.json 文件中的 scripts 字段加入如下条目: ```json { "scripts": { "dev": "vite", "build": "vite build", "serve": "electron ." } } ``` 现在应该能够执行 `npm run dev && npm run serve` 来查看正在工作的 Electron + Vue + Vite 组合效果了。 #### 注意事项 当涉及到实际部署时，请考虑优化生产环境下的打包策略以及处理跨平台差异等问题。此外，随着技术栈的发展变化，建议定期查阅官方文档获取最新实践指导。