vue3 添加electron

要将Vue 3与Electron结合起来，你可以按照以下步骤操作：

1. 创建一个新的Electron项目。你可以使用Electron官方提供的脚手架工具来创建项目，如`electron-forge`或者`electron-builder`。

2. 在项目文件夹中，打开终端并运行以下命令来初始化Vue项目：

   vue create .

3. 在Vue项目的根目录下安装Electron相关的依赖：

   npm install electron --save-dev

4. 创建一个新的Electron入口文件（如`main.js`），并将其放置在Vue项目的根目录下。

5. 在`main.js`文件中，引入Electron模块，并创建一个新的Electron实例：

   const { app, BrowserWindow } = require('electron');

   function createWindow() {
     const win = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
         contextIsolation: false,
       },
     });

     win.loadURL('http://localhost:8080'); // Vue开发服务器的URL

     // 在窗口关闭时释放资源
     win.on('closed', () => {
       win = null;
     });
   }

   app.on('ready', createWindow);

   app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') {
       app.quit();
     }
   });

   app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) {
       createWindow();
     }
   });

6. 在`package.json`中添加一个新的脚本，用于启动Electron应用：

   "scripts": {
     "electron": "electron ."
   }

7. 在终端运行以下命令来启动Electron应用：

   npm run electron

这样，你就成功地将Vue 3与Electron结合起来了。现在，你可以开始开发你的Electron应用并在其中使用Vue进行界面渲染。记得在Vue组件中使用Electron API时进行相应的引入和调用。