使用 Tauri 和 Vue.js 创建微型桌面应用程序

已发表: 2022-03-10
快速总结 ↬ Tauri 是一个工具链，用于从现有的 HTML、CSS 和 JavaScript 创建小型、快速和安全的桌面应用程序。 在本文中，Kelvin 解释了 Tauri 如何与渐进式框架 Vue.js 完美配合，方法是将这两种技术集成到将名为nota的示例 Web 应用程序捆绑为原生应用程序。

科技让我们的生活变得更美好，不仅仅是用户，还有创造者（开发者和设计师）。 在本文中，我将向您介绍 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 工作流生成的二进制文件。