当您想要创建一个具有良好用户界面的跨平台桌面应用程序时，可能会选择使用 Vue.js、Electron 和 Ant Design Vue。Vue.js 是一个流行的 JavaScript 框架，使用它可以轻松地创建动态的用户界面。Electron 是一个基于 Chromium 和 Node.js 的框架，用于构建跨平台桌面应用程序。Ant Design Vue 是一款基于 Vue.js 的 UI 组件库，提供了许多易于使用的 UI 组件。

在本文中，我们将介绍如何将 Vue.js、Electron 和 Ant Design Vue 结合在一起来构建一个跨平台桌面应用程序。我们将使用 Vite 作为我们的构建工具，它是一个快速的现代构建工具，用于构建 Web 应用程序和库。

首先，我们需要安装 Vue.js、Electron、Ant Design Vue 和 Vite。您可以使用以下命令安装它们：

npm install vue@next electron antd-vue@next vite --save-dev

接下来，我们需要创建一个新的 Vue.js 项目。您可以使用以下命令创建一个新的 Vue.js项目：

npm create vite@latest

这个命令将使用 Vite 模板创建一个新的 Vue.js 项目。现在，我们需要将这个项目转换为一个 Electron 应用程序。为此，我们需要使用 electron-builder 包。您可以使用以下命令安装它：

npm install electron-builder --save-dev

接下来，我们需要在项目的根目录下创建一个 main.js 文件，这是 Electron 应用程序的入口点。在 main.js 文件中，我们需要添加以下代码：

// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu, globalShortcut } = require('electron')
const path = require('path')
const {menu} = require("./config/menu_config");
const {add} = require("./controller");

//这里的配置手动写的，也可以使用cross-env插件配置
const mode = process.env.API_ENV === "dev"
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true" //解决跨域会有警告,用这个之后就不显示警告了
/*隐藏electron创听的菜单栏*/
Menu.setApplicationMenu(null)

// try {
//     require('electron-reloader')(module,{});
// } catch (_) {}

function createWindow() {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        frame: true /*是否展示顶部导航  去掉关闭按钮  最大化最小化按钮*/ ,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            webSecurity: false //解决跨域
        },
    })

    // and load the index.html of the app.
    // mainWindow.loadFile('index.html')  修改成如下

    mainWindow.loadURL(mode ? 'http://localhost:5173' : `file://${path.join(__dirname, '../dist', '/index.html')}`)

    // Open the DevTools.
    mainWindow.webContents.openDevTools()
    Menu.setApplicationMenu(menu)
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
    createWindow()

    app.on('activate', function() {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.

add(app,globalShortcut)

现在，我们需要在 package.json 文件中添加一些配置。在 "scripts" 中添加以下脚本：

"electron": "electron .",
"build": "vite build && electron-builder"

在 "build" 中，我们使用 vite build 构建应用程序，然后使用 electron-builder 打包应用程序。

现在，我们需要在 main.js 文件中添加以下代码：

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,
    }
  })

  // 加载应用的 index.html
win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// 当 Electron 完成初始化后创建浏览器窗口
app.whenReady().then(() => {
  createWindow()
})

// 关闭所有窗口后退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 在 macOS 上，单击 Dock 图标并且没有其他窗口打开时，重新创建一个窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

现在，我们需要在 package.json 文件修改成以下代码：

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && electron . ",
    "electron:build": "cross-env API_ENV=prod npm run build && electron-builder",
    "electron:serve": "cross-env API_ENV=dev concurrently -k \"npm run dev\" \"npm run electron\""
  },
  "dependencies": {
    "@ant-design/icons-vue": "^6.1.0",
    "ant-design-vue": "^3.2.20",
    "cnpm": "^9.2.0",
    "vite-plugin-vue-layouts": "^0.8.0",
    "vue": "^3.2.47",
    "vue-router": "^4.2.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "concurrently": "^8.0.1",
    "cross-env": "^7.0.3",
    "electron": "^24.3.1",
    "electron-builder": "^23.6.0",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.3.2",
    "vite-plugin-pages": "^0.29.1",
    "wait-on": "^7.0.1"
  },
  "build": {
    "appId": "8a06282fb08c48eeacb15bfbe4d3a35b",
    "productName": "ElectronApp",
    "copyright": "Copyright © 2022 <项目名称>",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  }
}

整体的项目结构如下

现在，我们可以编写我们的 Vue.js 应用程序。我们可以使用 Ant Design Vue 来创建用户界面。
在上面的代码中，我们使用了 Ant Design Vue 的 Layout 和 Menu 组件来创建一个具有导航栏和内容区域的布局。我们还定义了一个 App 组件，它将被用作我们的应用程序的根组件。

接下来，我们需要在 main.js 文件中添加以下代码来创建 Vue.js 实例,当然这里是全局引入,并没有按需引入,大家需要的可以根据自己的需要进行代码修改：

import { createApp } from 'vue'
import App from './App.vue'
import index from "./router";
import antd,{message} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
const app = createApp(App)
import * as Icons from '@ant-design/icons-vue'
// 循环使用全部全部图标
for (const i in Icons) {
    // 全局注册一下组件
    app.component(i, Icons[i])
}
app.config.globalProperties.$message = message;

app.use(antd).use(index).mount('#app')

这将构建应用程序，并将其打包为可执行文件。打包后的文件将位于 dist_electron 文件夹中。

在本文中，我们介绍了如何将 Vue.js、Electron 和 Ant Design Vue 结合在一起来构建一个跨平台桌面应用程序。我们使用了 Vite 作为我们的构建工具，并使用 Electron Builder 打包应用程序。我们还演示了如何使用 Ant Design Vue 来创建用户界面，并将其与 Vue.js 实例结合在一起。

本文中贴的代码不是完全代码,全拿下来并不能直接运行

完整版代码地址: vite-electron-antd