這陣子我在使用 Tauri 寫一個電子零件庫存管理工具 —— Elebox,工具練是 Vue3 + Vuetify + Vite + TypeScript + pnpm。這篇文章稍微記錄一下我在學習並使用它們時遇到的情況及基本用法。
主要得力於 Vue 的易用性,所以我這個不是網頁技術棧的人也可以簡單寫出一個還像樣的 Tauri UI。
注意,本人非網頁前後端出身,也沒有仔細的看過教學,這篇文章的內容只是個人經驗僅供參考。若有錯歡迎指出。
以下的範例只是用法參考,不具實際意義。
本文以 TS 代表 TypeScript,JS 代表 JavaScript。
Vue3
我的前端框架選擇的是 Vue3。其實在此之前我有稍微碰過 React,但當時沒有搞得很懂,這次換成 Vue 是想說它好像比較好上手,對與我這種非網頁技術專業的人來說應該比較好。我只是想要快速地建立一個可以運行的程式,而且這個程式不會很大,甚至可能只有我自己會用而已。
在實際使用過後,我覺得 Vue 的基本概念真的是滿簡單直覺的,我甚至沒有先看過教學或官方文件,只是找幾個示範專案看個大概,然後接下來就是邊寫邊查需要的功能。
資料
為了保持 Vue 的響應性,資料要使用 ref
或 reactive
儲存。這兩著的差異不是很大,網路上的文章123總結大概是:
ref
:可以是任何型別。取值和賦值時要使用 .value
屬性。只會監聽頂層成員的變化。
reactive
:必須是 Object 或 Array。不能直接賦值(會失去響應性),真的要的話要用 Object.assign()
4。會監聽深層成員的變化。
資料要放在各組件的 v-model
中,例如 v-model="refValue"
。
props 屬性
元素可能會有多個屬性可以使用。例如 Vuetify 的 v-btn。
屬性名前加冒號 :
代表可以接受 TS 程式。
動態處理元素
可以對元素使用類似 v-if
、v-for
等動態處理 DOM 元素。
onMounted()
如果要在載入此檔案時自動執行某程式,使用 ouMounted()
。
自製組件
如果要自製 components 的話,可能會用到這些:
props 傳入資料
將資料從父傳到子。但是傳入的 props 對子組件是唯讀的,如果要可以改的話,要再分配給 ref
。
TreeItem.vue
:
Super.vue
:
emit 回傳資料
將資料從子傳到父。使用 emit
讓子組件可以向上傳遞資料或事件。在傳遞資料時要注意其資料結構。
Sub.vue
:
Super.vue
:
watch 監聽變化
如果要即時監聽一個資料的變更,可以使用 watch
。
路由
安裝 vue-touter
可以提供路由功能。
路由表
首先要定義路由表:
在 TS 中使用
直接使用路徑:
使用路徑名稱:
在元素中使用
i18n 國際化多語言
安裝 vue-i18n
可以使用國際化功能。
設定
詞彙表
我是把詞彙表獨立在 locales/
資料夾下,一個語言一個檔案。
使用
設定好後可以在 HTML 中直接以 $t()
全域使用。
TS 中可能要明確引用。
動態變更語言
引入 locale
並直接賦值語言代號即可即時變更語言顯示。記得要 .value
。
路徑別名
如果專案具一定的規模的話,在 import
時使用相對路徑會出現一堆 ../
不太方便,為此我們可以設定路徑別名。常見的就是將 src/
設定為別名 @
。
修改 tsconfig.json
。
修改 vite.config.ts
。你可能需要另外安裝 @types/node
來使用 path
。
接下來你就可以使用 @
取代 src/
來使用絕對路徑了。
Vuetify
我使用的 UI 元件庫是 Vuetify,也沒什麼特別的原因,當初看順眼就直接用了。
設定
注意,專案自己的 .css
要在 Vuetify 後,以免被其覆蓋。
使用元件
你可以在此處查看所有 Vuetify 的元件。各個元件的說明都滿完整的,且有不少範例。
基本上就是看它的 Vue API:
- Props:可用的屬性,例如
color
、label
、disabled
。
- Slots:可以深入客製此元件。
- Event:該元件的事件,例如
@click
、@update:modelValue
。
Slots 的部分可能比較複雜些,我舉一個 Data table 的範例.
這樣的話,name 和 quantity 的內容就會是我們定義的樣子,我們可以在裡面再插入其它元件。而沒定義的 category 則會套用 Vuetify 的預設樣式。
如有想設定元件的預設值的話,可以參考 Global configuration — Contextual defaults。
排版
Vuetify 已經有定義好排版工具,但是還是需要有基本的 HTML、CSS 知識。可以參考:
基本上我就是使用 v-container
、v-row
、v-col
、v-spacer
來排版。然後用 class="ma-4"
、class="mx-4 my-2 pa-6"
來定義間隔。
Icon
Icon 庫我使用的是 Material Design Icons。可以參考 Icon Fonts — Vuetify。
Tauri
command
command 是 Tauri 連結 Rust 和 TS/JS 的主要功能。
各個 command 記得要加入 invoke_handler()
中。
在 TS/JS 端使用 invoke()
來執行 command。
除了這些基本型別,也可以傳遞自定義的複雜結構。通常會在 Rust 定義好 struct
,並在 TS 中定義等價的 interface
。
注意,TS/JS 通常偏好小駝峰命名,但 Rust 偏好蛇形(底線),所有在上面的 doSomethings1()
中名稱會被轉換。如果你想要統一使用蛇形的話,要加上 rename_all = "snake_case"
。
自動開啓除錯視窗
開發過程中常常要看除錯視窗,自動開啓會方便很多。在 main.rs
的 Builder
加入:5
管理狀態
要管理狀態的話,可以用 Mutex<T>
,然後使用 .manage()
傳入,只後就可以在函式中使用。
API
Tauri 有提供一些 API 可以在 TS/JS 中使用
dialog
dialog 可以開啓各自視窗。
在 tauri.conf.json
啓用需要的 API。
在 TS/JS 中使用。
檔案
如果你需要處理一些 config、temp、catch 檔案的話,可以使用 Tauri 內建的 path API。
如果你想要將裝置本機的路徑轉換成 URL 以可以在前端載入的話,可以使用 convertFileSrc。
其它
其它我覺得比較好用的 API 還有:
pnpm
我的套件管理是使用 pnpm,之前我都是單純使用 npm,但聽說 pnpm 比較快且不佔空間,而且用法上也不用特別另外學,所有就改成 pnpm 了。
前端語言
我使用 TypeScript 而非 JavaScript。因為我是寫 C/C++ 出身的,比較熟悉也喜歡靜態型別,而且我想(對於大部分的資料)靜態型別對程式的穩健性和可預期性也比較好,所以就直接選擇 TS。
我以前剛開始寫 Python 時也被動態型別搞得很煩,後來裝了靜態型別檢查工具才覺得 Python 好用。
參考
留言可能不會立即顯示。若過了幾天仍未出現,請 Email 聯繫:)