經過前幾天的理論學習，今天我們終於要動手實作了！讓我們一步步建置開發環境，並創建第一個 Tauri + Vue 桌面應用程式。

(我的電腦是 Windows 系統，因此以下都是用 Windows 為範例)

環境檢查清單

在開始開發之前，我們需要確保系統具備所有必要的開發工具。這部份官方網站有詳細的步驟與說明，建議大家直接去看正版的 XD

Rust 開發環境

首先安裝 Rust 程式語言的完整工具鏈。執行安裝程式後，會安裝 rustup（Rust 版本管理工具）和 cargo（Rust 的套件管理器）。安裝完成後，建議重新啟動終端機以確保環境變數生效。

可以用以下指令來檢查是否已順利安裝：

rustc --version
cargo --version

沒意外的話，這個系列應該都會使用 1.89.0 版。

Node.js 開發環境

接下來安裝 Node.js 執行環境。建議使用 LTS（長期支援）版本以確保穩定性。你可以選擇使用 npm、yarn 或 pnpm 作為套件管理器，本系列將使用 npm 進行示範。

可以用以下指令來檢查是否已順利安裝：

node -v

這個系列我使用的 Node.js 版本是 v22.18.0。

我自己因為有長期在開發 Vue，需要做 Node.js 版本管理，所以我是先安裝 nvm，再用 nvm 去指定要安裝 Node.js 的某個版本。如果是使用 Windows 系統，可以裝這個 Windows 版的 nvm。

Windows 系統

在 Windows 系統上，Tauri 需要額外的系統組件：

• WebView2：這是 Tauri 在 Windows 上的核心渲染引擎，通常 Windows 10/11 已預裝
• Microsoft C++ Build Tools：用於編譯 Rust 程式碼，可下載 Microsoft C++ Build Tools Installer 安裝，記得要勾選左上的「使用 C++ 的桌面開發」。 (見下方截圖)

MacOS 系統

只要下載 XCode 即可，可以從 Mac App Store 或是 Apple Developer website 上下載。

建立專案

環境準備就緒後，我們使用 Tauri 官方腳手架來建立專案：

npm create tauri-app@latest

這個命令會啟動互動式專案建立程序。我選的 Vue + TS + npm 的組合，以下是我的設定：

腳手架會自動下載並設定所有必要的依賴項，包括 Vue 3、Vite、Tauri 核心套件等。整個過程可能需要幾分鐘，取決於網路速度。

之後就可以看到建立好的專案：

啟動開發模式

專案建立完成後，進入專案目錄，安裝套件並啟動開發伺服器：

npm install
npm run tauri dev

這個命令背後實際執行了兩個並行的程序：

1. 前端開發伺服器：Vite 會啟動一個本地開發伺服器，負責編譯 Vue 組件、處理熱重載等前端開發功能
2. Rust 後端編譯：Cargo 會編譯 Tauri 的 Rust 後端程式碼，並建立原生視窗

首次執行時，Rust 編譯過程會較長，因為需要下載並編譯所有依賴項。後續的增量編譯會明顯加快。

見證第一個桌面應用

當編譯完成後，你會看到一個全新的桌面視窗彈出！這就是你的第一個 Tauri 應用程式。視窗中顯示的是 Vue 應用程式的介面，但它運行在一個真正的原生桌面視窗中，而不是瀏覽器。

這個預設的範例應用展示了 Tauri 的基本功能：前端 Vue 程式碼可以透過 invoke 函式呼叫後端的 Rust 函式，實現前後端的安全通訊。

開發者體驗

值得一提的是，Tauri 提供了很好的開發者體驗。當你修改前端程式碼時，Vite 的 hot reload 功能會立即反映這次的改動；當你修改 Rust 程式碼時，Tauri 會自動重新編譯並重啟應用程式。

小結

恭喜各位成功建立並運行了第一個 Tauri 應用！明天我們將深入探討 Tauri 專案的檔案結構，理解每個檔案的作用和相互關係。