Vueとデスクトップアプリケーションを構築する

更新:
好きですVue . それは素晴らしいフレームワーク素晴らしいアプリケーションを構築することができますです.しかし、本当の魔法は、ウェブだけに限られていません.単にネイティブのモバイルアプリケーションを使用することができますWeex or NativeScript-Vue ; しかし、デスクトップアプリケーションを構築する方法もあります.選ぶことができるElectron or Vuido この目的のためのライブラリ.この記事では、次のいずれかの電子と同じアプリを構築しようとするVuidoアプローチを説明します.

Vuido is a framework for creating native desktop applications based on Vue.js created by Michał Męciński. Applications using Vuido can run on Windows, OS X and Linux, using native GUI components, and don't require Electron.

Under the hood, Vuido uses the libui library which provides native GUI components for each desktop platform, and the libui-node bindings for Node.js.

💻 何を我々はビルドする予定です
例として、私たちはあなたの選択の都市で、現在の天気をチェックシンプルなアプリケーションを作成します.私たちはOpenWeatherMap 実際のデータを取得するAPI.
あなたが最終的なコードをチェックしたいならばhere .

🛠️ インストール
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

インストールが終了したらすぐに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>

あなたが走るならばbuild それからstart タスクは、非常に基本的なデスクトップアプリケーションでウィンドウが表示されます.

今、我々はより楽しい何かを構築する準備が整いました😅

💅 アプリの足場
あなたがVuidoについて知っている必要がある最初のものはそれがネイティブのコンポーネントを使用しているです.それで、我々の使い慣れたHTMLタグもCSSスタイリングもありません.Pvplicationヴィードは、ネイティブの外観を持っているし、各プラットフォーム上で感じている.
これは両方の利点と欠点と考えられるかもしれません-あなたは非常にカスタムメイドの出演でアプリケーションを構築することができません、しかし、それはより軽量で、電子で造られるものより速く動きます.
ビルトインコンポーネントの完全なリストはthis section Vuidoドキュメントの.
私の最初のアイデアは、ユーザーの選択の都市の天気予報を表示するアプリケーションを構築することでしたので、簡単なユーザーの相互作用とAPIの呼び出しをテストすることができます.まず最初に必要なのは、実際にボタンを持つ入力フィールドだった.また、ウィンドウサイズを10に変更しました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>

ボタンを入力フィールドに水平に配置し、それらの間にパディングを追加するには、<Box> コンテナ付きhorizontal and padded 属性.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レスポンスの例を確認できますhere .
したがって、データを取得するためには、axiosライブラリを追加する必要があります.

npm install --save axios

それから、それをインポートし、ベースURLとopenweather map APIキー変数を設定します.

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

ご覧のように、最初のボックスは前の章で作成した入力コンテナです.以下はSeparator - ウィジェットを視覚的に分離する水平線.次はGroup - それは、その内容のまわりでキャプションと境界を提供する容器です.
インサイドGroup 既に見たコンポーネントの組み合わせを見ることができます.Text 簡単なテキストコンテンツBox 容器としてSeparator . 次のようになります.


📦 包装
私の意見では、最高の方法Vuidoパワーアプリケーションをパッケージする最も簡単な方法は、ライブラリの著者が推奨されます.彼は自分の図書館を使うことを勧めているLaunchUI and LaunchUI Packager アプリケーションをエンドユーザーにパッケージ配布します.
私はグローバルにLaunchuiパッケガーをインストールしました.

npm install --global launchui-packager

それから、app rootフォルダに次のコマンドを実行しました.

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

上記のコマンドでweather-app はアプリケーション名です.1.0 はバージョンとdist/main.min.js はファイルへのパスです.
この後、私のアプリケーションとフォルダ!パッケージサイズは39 MBで、著者によって約束されています.

あなたがそれを実行しようとすると、それは本当に速い(0.1 sかそこら)起動していることに気づくかもしれません.

🌟 結論
長所

建設が容易

電子パッケージアプリに比べて小さなパッケージサイズを提供

よく文書化された

短所

いいえクールスタイル😕

まだリリースされていない(現在のバージョンは0.2.0 )

場合は、基本的な外観で高速な小さなアプリケーションが必要Vuidoは良いオプションのように見えます.それは明確なドキュメントを持っています、そして、おそらくビルトインITコンポーネントのリストは多分将来的に成長します.