跳到主要内容

Vue.js桌面应用开发

Vue.js 是一个流行的前端框架，主要用于构建单页应用（SPA）。然而，随着技术的发展，Vue.js 也可以用于开发桌面应用程序。通过结合 Electron 或 Tauri 等工具，开发者可以使用 Vue.js 创建跨平台的桌面应用。本文将带你从零开始，学习如何使用 Vue.js 生态系统开发桌面应用。

什么是 Vue.js 桌面应用开发？​

Vue.js 桌面应用开发是指使用 Vue.js 框架构建跨平台的桌面应用程序。与传统的 Web 应用不同，桌面应用可以直接运行在用户的计算机上，而不需要依赖浏览器。通过 Electron 或 Tauri 等工具，开发者可以将 Vue.js 应用打包为可执行文件，支持 Windows、macOS 和 Linux 等操作系统。

备注

Electron 是一个基于 Chromium 和 Node.js 的框架，允许开发者使用 Web 技术（HTML、CSS、JavaScript）构建桌面应用。Tauri 是一个更轻量级的替代方案，专注于性能和安全性。

为什么选择 Vue.js 开发桌面应用？​

  • 熟悉的开发体验：如果你已经熟悉 Vue.js，那么开发桌面应用将变得非常简单。
  • 跨平台支持：通过 Electron 或 Tauri，你可以轻松地将应用部署到多个操作系统。
  • 丰富的生态系统：Vue.js 拥有庞大的插件和工具生态系统，可以加速开发过程。

使用 Electron 开发 Vue.js 桌面应用​

1. 安装 Electron 和 Vue CLI​

首先，确保你已经安装了 Node.js 和 npm。然后，使用以下命令安装 Vue CLI 和 Electron：

npm install -g @vue/cli
npm install -g electron

2. 创建 Vue.js 项目​

使用 Vue CLI 创建一个新的 Vue.js 项目：

vue create my-vue-desktop-app

3. 集成 Electron​

在项目根目录下创建一个 electron 文件夹，并添加以下文件：

  • electron/main.js：Electron 的主进程文件。
  • electron/preload.js：用于在主进程和渲染进程之间通信。
// electron/main.js
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') // 开发环境
  // win.loadFile('dist/index.html') // 生产环境
}

app.whenReady().then(createWindow)

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

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

4. 启动 Electron 应用​

在 package.json 中添加以下脚本：

"scripts": {
  "electron:serve": "vue-cli-service serve & electron .",
  "electron:build": "vue-cli-service build && electron-builder"
}

然后运行以下命令启动应用：

npm run electron:serve

5. 打包应用​

使用 electron-builder 打包应用：

npm run electron:build

使用 Tauri 开发 Vue.js 桌面应用​

1. 安装 Tauri CLI​

首先，安装 Tauri CLI：

npm install -g @tauri-apps/cli

2. 创建 Tauri 项目​

在 Vue.js 项目根目录下运行以下命令：

tauri init

3. 配置 Tauri​

在 src-tauri/tauri.conf.json 中配置应用的基本信息：

{
  "package": {
    "productName": "my-vue-desktop-app",
    "version": "0.1.0"
  },
  "build": {
    "distDir": "../dist"
  }
}

4. 启动 Tauri 应用​

运行以下命令启动应用：

npm run tauri:serve

5. 打包应用​

使用以下命令打包应用：

npm run tauri:build

实际案例：开发一个简单的待办事项应用​

让我们通过一个简单的待办事项应用来展示 Vue.js 桌面应用开发的实际应用场景。

1. 创建 Vue 组件​

在 src/components 下创建一个 TodoList.vue 组件：

<template>
  <div>
    <h1>待办事项</h1>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
      </li>
    </ul>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo)
        this.newTodo = ''
      }
    }
  }
}
</script>

2. 在主应用中使用组件​

在 src/App.vue 中使用 TodoList 组件：

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
  components: {
    TodoList
  }
}
</script>

3. 运行应用​

使用 Electron 或 Tauri 运行应用，你将看到一个简单的待办事项应用。

总结​

通过本文，你已经学习了如何使用 Vue.js 生态系统开发桌面应用程序。无论是使用 Electron 还是 Tauri，Vue.js 都为你提供了强大的工具来构建跨平台的桌面应用。希望你能通过实际案例进一步掌握这些技术，并开发出更多有趣的应用。

附加资源​

练习​

  1. 尝试在待办事项应用中添加删除任务的功能。
  2. 使用 Tauri 打包一个简单的 Vue.js 应用，并部署到你的操作系统上。
  3. 探索 Electron 和 Tauri 的高级功能，如系统托盘、通知等。