使

使用 Vue 构建桌面应用程序：Vuido

2025-05-25

使用 Vue 构建桌面应用程序：Vuido

更新： 使用 Electron 构建 Vue 桌面应用程序

我爱Vue。它是一个很棒的框架，可以让你构建出色的 Web 应用。但真正的魔力在于，它不仅限于 Web 应用。你可以使用Weex或NativeScript-Vue轻松创建原生移动应用；当然，你也可以构建桌面应用。你可以选择Electron或Vuido库来实现这一点。在本文中，我将介绍 Vuido 的使用方法，下一篇文章中，我将尝试使用 Electron 构建同样的应用。

Vuido 是一个基于 Vue.js 创建原生桌面应用的框架，由Michał Męciński创建。使用 Vuido 的应用程序可以在 Windows、OS X 和 Linux 上运行，使用原生 GUI 组件，并且不需要 Electron。

在底层，Vuido 使用libui库，该库为每个桌面平台提供原生 GUI 组件，以及为 Node.js 提供libui-node绑定。

💻我们要构建什么

作为示例，我们将开发一个简单的应用程序，用于检查您所选城市的当前天气。我们将使用OpenWeatherMap API 来获取实际数据。

如果您只想检查最终代码，它就在这里。

🛠️ 安装

如 Vuido 文档所述，开始开发桌面应用需要满足一些先决条件。不同平台的要求有所不同：

💡Windows

  • windows-build-tools
  • Visual C++ Redistributable Package for Visual Studio 2013

💡Linux

  • build-essential
  • GTK+ 3​

💡OSX

  • Xcode

我正在使用 OSX 进行开发，此时我已经安装了 Xcode。

此外，您还需要安装vue-cli（如果您使用的是 Vue CLI 3，则还需要@vue/cli-init）。

要创建新项目，请运行以下命令：

vue init mimecorg/vuido-webpack-template my-project
Enter fullscreen mode Exit fullscreen mode

安装完成后，您可以使用以下代码在文件夹MainWindow.vue中找到该组件：src

<template>
  <Window title="some-app" width="400" height="100" margined v-on:close="exit">
    <Box>
      <Text>Welcome to your Vuido application!</Text>
    </Box>
  </Window>
</template>

<script>
export default {
  methods: {
    exit() {
      this.$exit();
    },
  },
};
</script>
Enter fullscreen mode Exit fullscreen mode

如果您运行build然后执行start任务，您将看到一个带有非常基本的桌面应用程序的窗口：

屏幕截图1

现在我们准备构建一些更有趣的东西了😅

💅 搭建应用程序

关于 Vuido，你首先需要知道的是它使用的是原生组件。因此，它既没有我们熟悉的 HTML 标签，也没有 CSS 样式，只有一组兼容不同桌面平台的原生 GUI 组件。使用 Vuido 构建的应用程序在每个平台上都能拥有原生的外观和体验。

这可能被视为优点和缺点——您无法构建具有非常自定义外观的应用程序，但它会比使用 Electron 构建的应用程序更轻量级并且运行速度更快。

内置组件的完整列表可以在Vuido 文档的此部分找到。

我最初的想法是开发一个应用，显示用户所选城市的天气情况，以便测试简单的用户交互和 API 调用。我首先需要的是一个带按钮的输入框。此外，我还将窗口大小更改为400x150px：

<Window title="Weather" width="400" height="150" margined v-on:close="exit">
    <Box padded>
        <Box horizontal padded>
        <TextInput stretchy></TextInput>
        <Button>Search</Button>
    </Box>
    </Box>
</Window>
Enter fullscreen mode Exit fullscreen mode

要将输入字段与按钮水平对齐并在它们之间添加填充，我们需要一个具有和属性的<Box>容器。类似于 HTML ，它作为包装器来包含和对齐组件。horizontalpaddedBoxdiv

TextInput是一个输入字段，它的stretchy属性意味着它将伸展以填充可用空间。

现在我们的应用程序看起来是这样的：

屏幕截图2

让我们query向组件数据添加一个属性，并将其设置为v-model输入字段。此外，我们需要在没有查询字符串时禁用按钮，这对我来说有点棘手，因为我尝试过一个熟悉的disabled属性——但在 Vuido 中你应该使用enabled它！所以现在我们的输入框如下所示：

<Box horizontal padded>
    <TextInput v-model="query" stretchy></TextInput>
    <Button :enabled="!!query">Search</Button>
</Box>
Enter fullscreen mode Exit fullscreen mode

🔗 进行 API 调用

现在的想法是使用给定的查询字符串作为城市来获取当前天气状况。

为了获取天气数据，我使用了OpenWeatherMap API。它提供了很多不同的功能，但我们只需要一章。您可以在此处Current weather data查看 JSON 响应的示例。

因此，为了开始获取数据，我们需要添加一个 axios 库：

npm install --save axios
Enter fullscreen mode Exit fullscreen mode

然后导入它并设置基本 URL 和 OpenWeatherMap API 密钥变量：

import axios from 'axios';
axios.defaults.baseURL = 'http://api.openweathermap.org/data/2.5'
const apiKey = process.env.API_KEY;
Enter fullscreen mode Exit fullscreen mode

在此之后，让我们为天气数据添加一些新属性以及从 API 中获取数据的方法：

export default {
  data() {
    return {
      query: '',
      error: false,
      city: '',
      country: '',
      weatherDescription: '',
      temp: null,
      tempMin: null,
      tempMax: null,
      humidity: null,
    };
  },
  methods: {
    exit() {
      this.$exit();
    },
    showWeather() {
      axios
        .get(
          `/weather?q=${this.query}&units=metric&&appid=${apiKey}`,
        )
        .then(response => {
          this.city = response.data.name;
          this.country = response.data.sys.country;
          this.weatherDescription = response.data.weather[0].description;
          this.temp = response.data.main.temp;
          this.tempMin = response.data.main.temp_min;
          this.tempMax = response.data.main.temp_max;
          this.humidity = response.data.main.humidity;
          this.error = false;
        })
        .catch(() => {
          this.error = true;
          this.city = '';
        });
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

现在是时候将新方法附加到按钮并更改模板以显示所有给定的数据，或者如果查询与任何现有城市不匹配则显示错误

<Window title="Weather in your city" width="400" height="150" margined v-on:close="exit">
    <Box padded>
    <Box horizontal padded>
        <TextInput stretchy v-model="query"/>
        <Button :enabled="!!query" @click="showWeather">Search</Button>
    </Box>
    <Separator horizontal/>
    <Group margined>
        <Box padded>
          <Text v-if="error">There is no such city in the database</Text>
          <Box v-if="!!city">
            <Box padded horizontal>
              <Text stretchy>{{city}}, {{country}}</Text>
              <Text>{{temp}}&deg;C</Text>
            </Box>
            <Text>{{weatherDescription}}</Text>
            <Separator horizontal/>
            <Box padded horizontal>
              <Text stretchy>Min: {{tempMin}}&deg;C</Text>
              <Text stretchy>Max: {{tempMax}}&deg;C</Text>
              <Text stretchy>Humidity: {{humidity}}%</Text>
            </Box>
          </Box>
        </Box>
    </Group>
    </Box>
</Window>
Enter fullscreen mode Exit fullscreen mode

如你所见，第一个框是我们在上一章中创建的输入容器。下方有一条Separator水平线，用于在视觉上分隔各个小部件。接下来是Group一个容器，它在其内容周围提供带有标题的边框。

在里面，Group你可以看到已经见过的组件的组合：Text用于简单的文本内容，Box作为容器和Separator。现在应用程序看起来如下：

截图3

📦包装

在我看来，打包基于 Vuido 的应用程序最好、最简单的方法是库作者推荐的方法。他建议使用他自己的库LaunchUI和LaunchUI Packager来打包应用程序并将其分发给最终用户。

我已经全局安装了 LaunchUI Packager：

npm install --global launchui-packager
Enter fullscreen mode Exit fullscreen mode

然后我在应用程序根文件夹中运行以下命令：

launchui-packager weather-app 1.0 dist/main.min.js
Enter fullscreen mode Exit fullscreen mode

上面的命令weather-app是应用程序名称、1.0版本和dist/main.min.js捆绑文件的路径。

之后就是一个包含我的应用程序的文件夹！程序包大小为 39Mb，比作者承诺的要大一点（文档中提到大约 20Mb），但也没大太多。

截图4

如果您尝试运行它，您可能会注意到它启动得非常快（0.1 秒左右）。

🌟 结论

优点：

  • 易于构建
  • 与 Electron 驱动的应用程序相比，包体积更小
  • 有据可查

缺点

  • 没有很酷的风格😕
  • 仍未发布（当前版本为 0.2.0）

如果你需要一个快速、小型且外观简洁的应用程序，Vuido 看起来是个不错的选择。它有清晰的文档，而且内置组件列表未来可能会越来越丰富。

文章来源：https://dev.to/n_tepluhina/building-a-desktop-app-with-vue-vuido-490n
Devto 翻译
PREV
Vue Apollo v4：初体验
NEXT
使用 Vue：NW.js 构建桌面应用程序