使用 Vue: Vuido 建立桌面應用程式

Vuido

你正在使用 Vue.js 嗎？現在你也可以使用它來開發桌面應用程式囉～

簡介

Vue 越來越強大了，除了可以使用 Weex 或 NativeScript-Vue 來打造移動裝置的 App，現在也可以建立桌面程式了，這是除了 Electron 之外的另一個選擇，這個工具的名稱為 Vuido。

Vuido 是一個框架，基於 Vue.js 可用來建立原生桌面應用程式，由 Michał Męciński 所開發，可以在 Windows、OS X 及 Linux 上使用原生的 GUI 元件，並且不需要 Electron。

Vuido 是使用 libui 這個由 C 寫成的函式庫來提供原生 GUI 元件的功能，在 GitHub - mimecorg/vuido 上已經有 5 千顆星，值得來研究一下。

快速入門

我還沒深入研究 Vuido，在看了介紹後有點好奇，就快速動手實驗了一下，以下為我的快速入門，如果你有需要可以查看官網上的說明文件。

前置作業

以下為各個作業系統必要的開發工具：

Windows

windows-build-tools

Visual C++ Redistributable Package for Visual Studio 2013
Linux

build-essential

GTK+ 3
OS X

Xcode

我自己是使用 Mac 而且已經安裝好 Xcode，所以以下為 Mac 上的示範。

必要安裝

必須先安裝 npm 或 yarn。

安裝 vue-cli 及 vue-cli-init：

npm install -g @vue/cli
npm install -g @vue/cli-init
或
yarn global add @vue/cli
yarn global add @vue/cli-init

！重要：如果你有舊版 (1.x 或 2.x) 的 vue-cli ，必須先移除後再安裝最新版 (v3) 的 vue-cli。

npm uninstall -g vue-cli
或
yarn global remove vue-cli

檢查版本：

vue --version
# 3.0.1

建立專案

現在可以開始建立專案了，先找一個資料夾來用。

mkdir vuido-demo
cd vuido-demo
# 建立專案: hello
vue init mimecorg/vuido-webpack-template hello
# 立即執行看結果
npm run build
npm start

應該可以看到一個簡單的視窗：

vuido-window

動手玩

src 目錄下只有兩個檔案，main.js 及 MainWindow.vue，請用編輯器打開MainWindow.vue。

這裡要先說明的是，Vuido 因為使用原生元件的關係，不會有我們熟悉的 HTML 標籤及 CSS 的屬性，所以你無法客製化自己的顯示風格，但是可以因此而得到輕量及速度快的好處。

<Box>標籤類似 <div>，更多的元件可以查看 Built-in Components。

我寫了一個簡單的 ToDo 程式，MainWindow.vue 修改後的程式碼如下：

<template>
  <Window title="hello" width="400" height="300" margined v-on:close="exit">
    <Box padded>
      <Box horizontal padded>
        <TextInput stretchy v-model="todo"></TextInput>
        <Button @click="add">Add</Button>
      </Box>

      <Separator horizontal/>
      
      <Box padded>
        <Checkbox v-for="todo in todos" @toggle="done(todo)">{{ todo }}</Checkbox>
      </Box>
      
      <Separator horizontal/>
      
      <Box padded>
        <Text v-for="done in dones">{{ done }}</Text>
      </Box>
    </Box>
  </Window>
</template>

<script>
export default {
  data() {
    return {
      todo: '',
      todos: [],
      dones: []
    };
  },

  methods: {
    exit() {
      this.$exit();
    },

    add() {
      if (! (this.todos.includes(this.todo) || this.todo.isEmpty())) {
        this.todos.push(this.todo);
        this.todo = '';
      }
    },

    done(todo) {
      this.dones.push(todo);
      this.todos.remove(todo);
    }
  }
};

String.prototype.isEmpty = function() {
    return (this.length === 0 || !this.trim());
};

Array.prototype.remove = function() {
    let what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};
</script>

基本上就是在寫 Vue 元件，只是 HTML 標籤換成它提供的而已。

執行結果如下：

vuido-demo

建立執行檔

既然是桌面應用程式，當然必須可以單獨執行，我們可以將程式打包成作業系統下的執行檔。

先安裝 LaunchUI Packager，然後打包：

npm install -g launchui-packager

# 打包
launchui-packager hello 1.0 dist/main.min.js

完成後會產生一個資料夾 hello-v1.0-darwin-x64，其中的 hello.app 就是你的桌面應用程式的執行檔了，點兩下就能執行。

參考資料：Building a Desktop App with Vue: Vuido

本文網址：http://blog.tonycube.com/2018/09/vue-vuido.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀