要使用 Vue 开发桌面应用，最主流和推荐的方法是使用 Electron 框架。

Electron 是一个开源框架，由 GitHub 开发，它允许你使用前端技术栈（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用。你可以将 Vue 应用的界面作为 Electron 窗口中的网页来运行。

为什么选择 Electron + Vue？

技术栈熟悉： 你可以使用自己熟悉的前端技术（Vue、Webpack、CSS 预处理器等）来开发桌面应用，无需学习新的编程语言（如 C++ 或 Swift）。

跨平台： Electron 应用可以打包成 Windows、macOS 和 Linux 三个平台的安装包，实现“一次开发，多端运行”。

丰富的生态： Vue 丰富的组件库、状态管理（Vuex）、路由（Vue Router）等生态都可以直接在 Electron 中使用，大大提高开发效率。

开发流程

一个典型的 Vue + Electron 桌面应用开发流程如下：

1. 项目初始化

最推荐的方式是使用 Vue CLI 插件。这个插件可以帮你自动配置好 Vue 和 Electron 的集成环境，省去了大量的配置工作。

创建 Vue 项目： 如果你还没有 Vue 项目，首先使用 Vue CLI 创建一个：

Bash

vue create my-electron-app

添加 Electron 插件： 进入项目目录，然后添加 Electron Builder 插件。

Bash

cd my-electron-app

vue add electron-builder

这个命令会自动安装必要的依赖，并在 package.json 文件中添加打包和运行脚本。

2. 项目结构

添加插件后，你的项目结构会发生变化。核心文件是：

src/main.js：这是 Vue 应用的入口文件。

src/background.js：这是 Electron 的主进程文件。它负责创建和管理应用窗口，以及处理底层系统事件。

public/index.html：Vue 应用的 HTML 文件。

3. 编写应用

开发过程和普通的 Vue 应用非常相似，你只需要在 .vue 文件中编写组件即可。Electron 会在后台启动一个窗口，并加载你的 Vue 应用。

主进程（background.js）： 在这个文件中，你可以使用 Node.js 的 API 来访问底层操作系统功能，比如文件系统、网络、进程间通信等。

JavaScript

// 这是一个简单的 Electron 主进程文件示例

'use strict'

import { app, BrowserWindow, protocol } from'electron'

// 创建应用窗口

functioncreateWindow() {

const win = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

nodeIntegration: true, // 允许在渲染进程中使用 Node.js API

contextIsolation: false

}

})

// 加载 Vue 应用

win.loadURL(process.env.VUE_APP_URL)

}

app.on('ready', async () => {

createWindow()

})

渲染进程（Vue 组件）： 在 .vue 组件中，你可以直接使用 window.require('electron').ipcRenderer 来和主进程通信。

代码段

<template>

<button @click="openDialog">打开文件选择框</button>

</template>

<script>

import { ipcRenderer } from 'electron';

export default {

methods: {

openDialog() {

ipcRenderer.send('open-dialog');

}

}

}

</script>

4. 运行与调试

使用 Vue CLI 插件提供的命令来运行和调试你的应用。

Bash

npm run electron:serve

这个命令会启动一个带有热重载的开发服务器，你可以在一个 Electron 窗口中实时看到代码的修改。

5. 打包与发布

当应用开发完成并准备发布时，使用以下命令进行打包。

Bash

npm run electron:build

这个命令会自动将你的应用打包成 Windows 的 .exe、macOS 的 .dmg 或 Linux 的 .AppImage 文件，方便用户安装。

使用 Electron 结合 Vue 是开发桌面应用的绝佳选择。它既能让你利用 Vue 强大的前端生态来构建精美的界面，又能通过 Electron 的能力来访问底层系统，实现功能强大的桌面应用。