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

Vuido

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

簡介

Vue 越來越強大了,除了可以使用 WeexNativeScript-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,在看了介紹後有點好奇,就快速動手實驗了一下,以下為我的快速入門,如果你有需要可以查看官網上的說明文件

前置作業

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

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

必要安裝

必須先安裝 npmyarn

安裝 vue-clivue-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.jsMainWindow.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 撰寫,請勿全文複製,轉載時請註明出處及連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。