使用 Tauri 和 Vue.js 創建微型桌面應用程序

科技讓我們的生活變得更美好，不僅僅是用戶，還有創造者（開發者和設計師）。 在本文中，我將向您介紹 Tauri。 如果出現以下情況，本文將對您有用：

• 您一直在使用 HTML、CSS 和 JavaScript 在 Web 上構建應用程序，並且希望使用相同的技術來創建針對 Windows、macOS 或 Linux 平台的應用程序；
• 您已經在使用 Electron 等技術構建跨平台桌面應用程序，並且想要查看替代方案；
• 您想使用適用於 Linux 發行版（例如 PureOS）的 Web 技術構建應用程序；
• 您是 Rust 愛好者，並且希望將其應用於構建原生跨平台應用程序。

我們將研究如何從現有的 Web 項目構建原生跨平台應用程序。 讓我們開始吧！

注意：本文假設您熟悉 HTML、CSS、JavaScript 和 Vue.js。

金牛座是什麼？

官網很好的總結了Tauri：

• Tauri 是一個多語言工具鏈，用於構建更安全的本地應用程序，包括小型和快速的二進製文件。 “多語言”是指 Tauri 使用多種編程語言。 目前，使用 Rust、JavaScript 和 TypeScript。 但是有計劃讓你使用 Go、C++、Python 等。
• 它允許您使用任何基於 HTML 和 JavaScript 的前端框架（例如 Vue.js、React 或 Angular）來構建本機桌面應用程序，並且它可以集成到任何管道中。
• 它可以幫助您為主要桌面平台（移動和 WebAssembly 即將推出）構建和捆綁二進製文件。

因此，基本上，Tauri 允許您使用 Web 技術來創建小型且安全的本機桌面應用程序。

在其 GitHub 頁面上，Tauri 被描述為一個與框架無關的工具鏈，用於構建高度安全的本地應用程序，這些應用程序具有很小的二進製文件（即文件大小）並且速度非常快（即 RAM 使用量最少）。

為什麼不是電子？

使用 Web 技術構建桌面應用程序的流行工具是 Electron。

然而，Electron 應用程序的包大小相當大，運行時往往會佔用大量內存。 以下是 Tauri 與 Electron 的比較：

• 捆
  Tauri 應用程序的大小可以小於 600 KB。
• 記憶
  Tauri 應用程序的佔用空間不到 Electron 應用程序大小的一半。
• 執照
  Tauri 可以重新授權，但 Electron 不行。 Electron 附帶 Chromium，開箱即用。 但是，Chromium 包含一個名為 Widevine 的數字版權管理系統。 在 Chromium 中包含 Widevine 使得使用 Electron 創建的應用程序受到 PureOS 等平台的用戶的不滿，唯一的原因是它不是免費/自由的開源軟件 (FLOSS)。 PureOS 等平台已通過自由軟件基金會 (FSF) 的驗證。 這意味著他們只能在其應用商店中發布免費和開源軟件。

簡而言之，如果您的應用程序是使用 Electron 構建的，那麼它永遠不會在 PureOS 商店中正式發布。 對於針對此類發行版的開發人員來說，這應該是一個問題。

Tauri 的更多功能

• 安全對於 Tauri 團隊來說非常重要。 使用 Tauri 創建的應用程序從一開始就是安全的。
• Tauri 與任何前端框架兼容，因此您無需更改堆棧。
• 它有許多設計模式，可以幫助您通過簡單的配置選擇重要的功能。

金牛座的優點

• Tauri 使您能夠使用為 Web 構建的代碼庫並將其轉變為原生桌面應用程序，而無需進行任何更改。
• 儘管您可以在基於 Tauri 的項目中使用 Rust，但它是完全可選的。 如果您這樣做了，則無需更改針對 Web 的原始代碼庫中的任何內容。

現實世界的金牛座

如果您已經加入 Vue.js 社區一段時間，那麼您就會聽說過 Guillaume Chau，他是 Vue.js 核心團隊的成員。 他負責 Vue.js 命令行界面 (CLI) 以及其他很棒的 Vue.js 庫。 他最近創建了 guijs，代表“JavaScript 項目的圖形用戶界面”。 它是一個 Tauri 驅動的原生桌面應用程序，可以直觀地管理您的 JavaScript 項目。

Guijs 是 Tauri 可能實現的一個示例，Vue.js 團隊的核心成員在該應用程序上工作的事實告訴我們 Tauri 與 Vue.js（以及其他前端框架）配合得很好。 如果您有興趣，請查看 GitHub 上的 guijs 存儲庫。 而且，是的，它是開源的。

金牛座如何運作

在高層次上，Tauri 使用 Node.js 構建 HTML、CSS 和 JavaScript 渲染窗口作為用戶界面 (UI)，由 Rust 管理和引導。 該產品是一個整體二進製文件，可以作為 Linux (deb/appimage)、macOS (app/dmg) 和 Windows (exe/msi) 的常見文件類型分發。

Tauri 應用程序是如何製作的

通過以下步驟創建 Tauri 應用程序：

1. 首先，在您的 GUI 框架中製作一個界面，並準備好 HTML、CSS 和 JavaScript 以供使用。
2. Tauri Node.js CLI 接受它並根據您的配置裝配 Rust 運行器。
3. 在開發模式下，它創建一個 WebView 窗口，帶有調試和Hot Module Reloading 。
4. 在構建模式下，它裝配捆綁器並根據您的設置創建最終應用程序。

設置您的環境

既然您知道 Tauri 是什麼以及它是如何工作的，那麼讓我帶您了解如何設置您的機器以使用 Tauri 進行開發。

注意：此處的設置適用於 Linux 機器，但也有適用於 macOS 和 Windows 的指南。

Linux 設置

Tauri 的多語言特性意味著它需要許多工具依賴項。 讓我們通過安裝一些依賴項來開始它。 運行以下命令：

 $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

上述操作成功後，繼續安裝 Node.js（如果您還沒有的話），因為 Tauri 需要它的運行時。 你可以通過運行這個來做到這一點：

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

這將安裝 nvm（Node.js 版本管理器），它允許您輕鬆管理 Node.js 運行時並輕鬆地在 Node.js 版本之間切換。 安裝後，運行此命令以查看 Node.js 版本列表：

 nvm ls-remote

在撰寫本文時，最新版本是 14.1.0。 像這樣安裝它：

 nvm install v14.1.0

完全設置 Node.js 後，您需要安裝 Rust 編譯器和 Rust 包管理器：Cargo。 下面的命令將同時安裝：

 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

運行此命令後，通過運行以下命令確保 Cargo 和 Rust 在您的$PATH中：

 rust --version

如果一切順利，這應該返回一個版本號。

根據 Tauri 文檔，通過運行以下命令確保您使用的是最新版本：

 $ rustup update stable

瞧！ 您離讓您的機器 100% 為 Tauri 做好準備更近了一步。 現在剩下的就是安裝tauri-bundler crate。 最好退出 CLI，然後在新的 CLI 窗口中運行以下命令：

 $ cargo install tauri-bundler --force

尤里卡！ 如果一切順利，您的機器現在已準備好用於 Tauri。 接下來，我們將開始將 Tauri 與 Vue.js 集成。 讓我們開始吧！

紗

Tauri 團隊建議安裝 Yarn 包管理器。 所以讓我們這樣安裝：

 npm install -g yarn

然後運行以下命令：

 yarn --version

如果一切正常，則應該返回一個版本號。

將 Tauri 與 Vue.js 集成

現在我們已經安裝了 Tauri，讓我們捆綁一個現有的 Web 項目。 您可以在 Netlify 上找到該項目的現場演示。 繼續並分叉存儲庫，它將用作外殼。 分叉後，確保通過運行以下命令克隆分叉：

 git clone https://github.com/[yourUserName]/nota-web

克隆項目後，運行以下命令安裝依賴項：

 yarn

然後，運行這個：

 yarn serve

您的應用程序應該在localhost:8080上運行。 殺死正在運行的服務器，讓我們為 Tauri 安裝 Vue.js CLI 插件。

vue-cli-插件-tauri

Tauri 團隊創建了一個 Vue.js CLI 插件，可以快速裝配並將您的 Vue.js 單頁應用程序 (SPA) 轉變為一個既快速又安全的小型跨平台桌面應用程序。 讓我們安裝那個插件：

 vue add tauri

安裝插件後，可能需要一段時間，它會要求您提供窗口標題。 只需輸入nota並按“Enter”。

讓我們來看看 Tauri 插件帶來的變化。

包.json

Tauri 插件在package.json文件的腳本部分添加了兩個腳本。 他們是：

 "tauri:build": "vue-cli-service tauri:build", "tauri:serve": "vue-cli-service tauri:serve"

tauri:serve腳本應該在開發過程中使用。 所以讓我們運行它：

 yarn tauri:serve

以上將下載啟動我們的應用程序所需的 Rust crates。 之後，它將以開發模式啟動我們的應用程序，並在其中創建一個 WebView 窗口，並進行調試和熱模塊重新加載！

src-tauri

您還會注意到該插件在您的應用程序目錄的根目錄中添加了一個src-tauri目錄。 此目錄內是 Tauri 用於配置桌面應用程序的文件和文件夾。 我們來看看內容：

 icons/ src/ build.rs cmd.rs main.rs Cargo.lock Cargo.toml rustfmt.toml tauri.conf.json tauri.js

我們需要做的唯一改變是在src-tauri/Cargo.toml中。 Cargo.toml就像 Rust 的package.json文件。 在Cargo.toml中找到以下行：

 name = "app"

將其更改為：

 name = "nota"

這就是我們需要為這個例子做的所有改變！

捆綁

要為您當前的平台捆綁nota ，只需運行以下命令：

 yarn tauri:build

注意：與開發窗口一樣，第一次運行它時，需要一些時間來收集 Rust crates 並構建所有內容。 在隨後的運行中，它只需要自己重建 Tauri 板條箱。

完成上述操作後，您應該擁有當前操作系統的nota二進製文件。 對我來說，我在src-tauri/target/release/bundle/deb/目錄中創建了一個.deb二進製文件。*

跨平台

您可能注意到yarn tauri:build命令剛剛為您的操作系統生成了一個二進製文件。 所以，讓我們為其他操作系統生成二進製文件。 為此，我們將在 GitHub 上設置工作流。 我們在這裡使用 GitHub 作為我們跨平台應用程序的分發媒介。 因此，您的用戶只需在項目的“發布”選項卡中下載二進製文件即可。 我們將實施的工作流程將通過 GitHub 操作的強大功能自動為我們構建二進製文件。 讓我們開始吧。

創建 Tauri 工作流程

感謝 Jacob Bolda，我們有了一個工作流程，可以在 GitHub 上使用 Tauri 自動創建和發布跨平台應用程序。 除了為各種平台（Linux、Mac 和 Windows）構建二進製文件外，該操作還將為您上傳二進製文件作為 GitHub 上的版本。 它還使用 Jacob 所做的 Create a Release 操作來實現此目的。

要使用此工作流程，請在nota-web的根目錄中創建一個.github目錄。 在此目錄中，創建另一個名為workflows的目錄。 然後我們將在.github/workflows/中創建一個工作流文件，並將其命名為release-tauri-app.yml 。

在release-tauri-app.yml中，我們將添加一個為 Linux、macOS 和 Windows 構建二進製文件的工作流。 此工作流程還將二進製文件作為草稿版本上傳到 GitHub。 每當我們推送到主服務器時，都會觸發工作流。

打開release-tauri-app.yml ，並添加以下代碼段：

 name: release-tauri-app on: push: branches: - master paths: - '**/package.json' jobs: check-build: runs-on: ubuntu-latest timeout-minutes: 30 steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build create-release: needs: check-build runs-on: ubuntu-latest outputs: RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }} steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: get version run: echo ::set-env name=PACKAGE_VERSION::$(node -p "require('./package.json').version") — name: create release id: create_tauri_release uses: jbolda/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }} release_name: 'Release nota app v${{ env.PACKAGE_VERSION }}' body: 'See the assets to download this version and install.' draft: true prerelease: false create-and-upload-assets: needs: create-release runs-on: ${{ matrix.platform }} timeout-minutes: 30 strategy: fail-fast: false matrix: platform: [ubuntu-latest, macos-latest, windows-latest] include: — platform: ubuntu-latest buildFolder: bundle/deb ext: \_0.1.0_amd64.deb compressed: '' — platform: macos-latest buildFolder: bundle/osx ext: .app compressed: .tgz — platform: windows-latest buildFolder: '' ext: .x64.msi compressed: '' steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk (ubuntu only) if: matrix.platform == 'ubuntu-latest' run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/release/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset id: upload-release-asset uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip — name: build tauri app in debug mode run: yarn tauri:build --debug — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset with debug mode on id: upload-release-asset-debug-mode uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip

要測試工作流程，請將您的更改提交並推送到 fork 的master分支。 成功推送到 GitHub 後，您可以點擊 GitHub 中的“Actions”選項卡，然後點擊“Check build”鏈接查看工作流程的進度。

成功執行該操作後，您可以在 GitHub 上的存儲庫頁面的“Releases”中看到草稿版本。 然後，您可以繼續發布您的版本！

結論

本文介紹了用於構建安全、跨平台和微型原生應用程序的多語言工具鏈。 我們已經了解了 Tauri 是什麼以及如何將它與 Vue.js 結合起來。 最後，我們通過運行yarn tauri:build捆綁了我們的第一個 Tauri 應用程序，我們還使用 GitHub 操作為 Linux、macOS 和 Windows 創建了二進製文件。

讓我知道你對 Tauri 的看法——我很高興看到你用它構建了什麼。 如果您有任何問題，可以加入 Discord 服務器。

本文的存儲庫位於 GitHub 上。 此外，請參閱 GitHub 工作流生成的二進製文件。