使用Vue構建桌面應用程式：Vuido

我非常喜歡Vue。這是個優秀的框架，可以幫助我們搭建完美的web應用程式。但真正神奇的地方是你不僅僅可以用它搭建web應用程式，還可以使用Weex或NativeScript-Vue建立本地移動應用程式。你還可以選擇Electron或Vuido庫，搭建桌面應用程式。在本文中，我將介紹如何使用Vuido庫建立本地應用程式。

Vuido是一款基於Vue.js的框架，由Micha? M?ciński開發，用於建立本地桌面應用程式。使用Vuido開發的應用程式可以執行在Windows、OS X和Linux平台，使用原生的GUI元件，不需要Electron庫。

Vuido使用為每款桌面平台提供本地GUI元件的libui庫，以及Node.js的libui-node係結。

我們將搭建什麼？

為了便於介紹，我們將開發一款簡單的應用程式，用於檢視你指定城市的當前天氣。我們將使用OpenWeatherMap API獲取真實資料。

如果你想查閱完整的程式碼，請點選這裡。

安裝

正如Vuido文件所述，要開發桌面應用程式有些預先條件。根據平台的不同，預先條件也不同：

Windows平台

windows-build-tools

Visual Studio 2013的Visual C++ Redistributable

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

在安裝完成之後，你將在src資料夾中發現MainWindow.vue元件，程式碼如下所示：

<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>

然後執行build和start指令，你將看到非常簡單的桌面應用程式視窗：

接下來，我們就可以建立有趣的程式了。

搭建應用程式

首先你需要了解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>

要讓輸入框和按鈕水平對齊，並在它們之間保持點距離，我們需要一個有horizontal和padded屬性的<Box>容器。Box和HTML的div元素相似，它就像包含元件並對齊元件的包裝器。

TextInput是輸入框，它的stretchy屬性表示它可以根據填充所需的空間拉伸。

現在我們的應用程式看起來是這樣的：

現在向元件資料新增query屬性，為輸入框的該屬性設定為v-model。同時，如果沒有輸入字串，我們應該禁用按鈕。這對我來說很棘手，因為我試了非常熟悉的disabled屬性，但實際上在Vuido中應該使用enabled屬性。所以我們的輸入框現在是這樣的：

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

實現API呼叫

接下來我們需要根據給定的城市查詢字串來獲取當前的天氣情況。

我使用OpenWeatherMap API來獲取天氣資料。它提供了很多內容，但我們只需要Current weather data這一部分。你可以在這裡測試JSON響應範例。

所以，要想獲得資料，我需要新增axios庫：

npm install --save axios

然後匯入它，設定好base URL和OpenWeatherMap API key變數：

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

之後，我們要新增一些天氣資料的新屬性，以及從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 = '';
        });
    },
  },
};

現在需要給按鈕新增新的方法，改變模板，展示所有的資料，或在輸入的欄位不能匹配任何現有城市的時候給出報錯資訊。

<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}}°C</Text>
            </Box>
            <Text>{{weatherDescription}}</Text>
            <Separator horizontal/>
            <Box padded horizontal>
              <Text stretchy>Min: {{tempMin}}°C</Text>
              <Text stretchy>Max: {{tempMax}}°C</Text>
              <Text stretchy>Humidity: {{humidity}}%</Text>
            </Box>
          </Box>
        </Box>
    </Group>
    </Box>
</Window>

正如你所看到的，第一個框是我們在前面建立的輸入容器。下面是Separator，一條分割不同部分的水平線。接下來是Group,這是個有邊框的內容容器。

在Group中你將會看到組合好的許多元件：包含簡單文字內容的Text，作為容器的Box以及Separator。現在你的應用程式看起來是這樣的：

封裝

我認為封裝Vuido應用程式最簡單最好的方式是庫作者推薦的一個方法。他建議使用他自己的LaunchUI和LaunchUI Packager庫來封裝，並分發應用程式給終端使用者。

我已經安裝了LaunchUI Packager：

npm install --global launchui-packager

之後我要在應用程式root資料夾執行以下指令：

launchui-packager weather-app 1.0 dist/main.min.js

上面的指令中，weather-app是應用程式名稱，1.0是版本資訊，dist/main.min.js是系結檔案的路徑。

下面是我的應用程式的資料夾，大小是39Mb，這比作者所說的要多（文件中說最多20Mb），但也沒多得太離譜。

如果你試著執行，你會發現它啟動得非常快（0.1秒左右）。

總結

優點：

• 容易搭建
• 和Electron應用程式相比，封裝後的大小非常小
• 文件很完善

缺點：

• 外觀不好看
• 還沒有正式發布（當前版本是0.2.0）

如果你需要搭建基礎外觀的小型快速應用程式，Vuido是一個很好的選擇。它有非常清晰的文件，可能之後內建的元件會變得更多。

本文作者

Natalia Tepluhina是熱愛VueJS的前端開發人員。她還是Vue Vixens的CTO，Noob大會的講師。

檢視英文原文：Building a Desktop App with Vue: Vuido