vue3+vite+electron项目搭建

搭建一个基于 Vue3、Vite 和 Electron 的项目，可以按照以下步骤进行：

1. 创建一个空的文件夹，打开终端并进入该文件夹，执行以下命令：

   npm init -y

2. 安装依赖：

   npm install --save-dev vue@next @vitejs/plugin-vue @vue/compiler-sfc electron vite electron-builder

3. 在项目根目录下创建一个 `src` 文件夹，用于存放 Vue 代码。

4. 在项目根目录下创建一个 `main.js` 文件，用于启动 Electron 应用程序。在该文件中编写以下代码：

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

   function createWindow () {
     // 创建浏览器窗口
     const win = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
         contextIsolation: false,
         enableRemoteModule: true,
       },
     })

     // 加载 Vue 项目
     win.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`)
   }

   app.whenReady().then(() => {
     createWindow()

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

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

5. 在项目根目录下创建一个 `vite.config.js` 文件，用于配置 Vite。在该文件中编写以下代码：

   const { defineConfig } = require('vite')
   const vue = require('@vitejs/plugin-vue')

   module.exports = defineConfig({
     plugins: [vue()],
     build: {
       outDir: '../dist',
     },
   })

6. 在 `package.json` 文件中添加以下脚本：

   "scripts": {
     "serve": "vite",
     "build": "vite build",
     "electron": "electron ."
   }

7. 在终端中执行以下命令启动开发服务器：

   npm run serve

8. 在终端中执行以下命令启动 Electron 应用程序：

   npm run electron

现在，你已经成功搭建了一个 Vue3、Vite 和 Electron 的项目。可以在 `src` 文件夹中编写 Vue 代码，然后使用 `npm run build` 命令打包应用程序。打包完成后，可以在 `dist` 文件夹中找到生成的可执行文件。