手把手教你用 Tauri+Vue 创建小型桌面应用

作者 | Kelvin Omereshone

译者 | 王强

策划 | 李俊辰

作为 Electron 的替代方案之一,Tauri 可通过已有的 HTML、CSS 和 JavaScript 创建小型、快速且安全的桌面应用。在这篇文章中,作者演示了如何使用 Tauri 和 Vue 两种技术,将一个名为 nota 的示例应用打包为原生应用。

什么是 TAURI?

Tauri 的官网是这样介绍的:

  • Tauri 是一个多语言工具链,可使用小型和快速的二进制文件构建安全的原生应用。所谓“多语言”,是指 Tauri 可使用多种编程语言,包括 Rust、JavaScript 和 TypeScript,将来还会支持 Go、C++ 和 Python 等。

  • 它让你可以使用任何基于 HTML 和 JavaScript 的前端框架(例如 Vue.js、React 或 Angular)来构建原生桌面应用,并且可以将其集成到任何管道中。

  • 它可以帮助你为主要的桌面平台(即将推出移动和 WebAssembly 支持)构建和打包二进制文件。

在其 GitHub 页面上,Tauri 称自己是与框架无关的工具链,用于构建高度安全的原生应用,这些应用体积小巧,速度飞快(内存占用很低)。

为什么不用 Electron?

Electron 是使用 Web 技术构建桌面应用的流行工具。

但是,Electron 应用包的体积较大,运行时往往会占用大量内存。Tauri 与 Electron 对比如下:

  • 包体积:Tauri 应用的体积可以小于 600KB。

  • 内存占用:Tauri 应用的内存占用不到 Electron 应用的一半。

  • 许可证:Tauri 可以进行再授权,而 Electron 则不能。Electron 自带 Chromium,但 Chromium 包含一个名为 Widevine 的数字版权管理系统。这使得使用 Electron 创建的应用受到了 PureOS 之类的平台用户的抵制,因为它不是免费 / 自由开源软件(FLOSS)。PureOS 等平台已通过自由软件基金会(FSF)的验证。这意味着他们只能在其应用商店中发布免费和开源软件。

简而言之,如果你的应用是使用 Electron 构建的,则它永远无法在 PureOS 商店中正式发售。

Tauri 的更多特性

  • 用 Tauri 创建的应用一开始就是高度安全的。

  • Tauri 兼容任何前端框架,因此你无需改变技术栈。

  • 它有许多设计模式,可通过简单的配置选择重要的特性。

Tauri 的优点

  • Tauri 让你可以直接把 Web 应用的代码库转换为原生桌面应用。

  • 尽管你可以在基于 Tauri 的项目中使用 Rust,但这完全是可选的。如果这样做的话,你不需要在针对 Web 的原始代码库中进行任何更改。

Tauri 的实践应用

Vue.js 核心团队成员 Guillaume Chau 最近创建了 guijs,意思是“JavaScript 项目的图形用户界面”。它是 Tauri 支持的原生桌面应用,能够以可视方式管理你的 JavaScript 项目。

Guijs 是 Tauri 的一个示例,也证明 Tauri 与 Vue.js 配合得很好。感兴趣的话请查看 GitHub 上的 guijs 存储库。而且它是开源的。

Tauri 的工作机制

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 Runner。

  3. 在开发模式下,它将创建一个 WebView 窗口,其中包含调试和热模块重载。

  4. 在构建模式下,它将设置打包器并根据你的设置创建最终应用。

设置环境

注意 :下面将介绍如何在 Linux 环境下进行配置。macOS 和 Windows 的指南请看下方链接。

  • macOS:

https://github.com/tauri-apps/tauri/wiki/03.-MacOS-Setup

  • Windows:

https://github.com/tauri-apps/tauri/wiki/04.-MS-Windows-Setup

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 版本列表:

nvm ls-remote

在撰写本文时最新版本是 14.1.0,安装它:

nvm install v14.1.0

之后你需要安装 Rust 编译器和 Rust 包管理器:Cargo。

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

运行以下命令确保 Cargo 和 Rust 在 $PATH 中:

rust --version

如果一切顺利,则应该一个返回版本号。根据 Tauri 文档,运行以下命令确保你使用的是最新版本:

$ rustup update stable

剩下的就是安装 tauri-bundler。最好退出 CLI,然后在新的 CLI 窗口中运行以下命令:

$ cargo install tauri-bundler --force

如果一切顺利,你的机器就可以使用 Tauri 了。接下来我们开始集成 Tauri 与 Vue.js。

    Yarn    

Tauri 团队建议安装 Yarn 包管理器:

npm install -g yarn

然后运行以下命令:

yarn --version

如果一切正常,则应该返回一个版本号。

将 Tauri 与 Vue.js 集成

现在我们已经安装了 Tauri,接下来打包一个现有的 Web 项目。你可以在 Netlify 上找到该项目的实时演示。

https://tauri-nota.netlify.app/

fork 这个存储库:

https://github.com/DominusKelvin/nota-web

然后克隆它:

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

克隆项目后,运行以下命令安装依赖项:

yarn

然后运行:

yarn serve

你的应用应在 localhost:8080 上运行。杀掉正在运行的服务器,然后为 Tauri 安装 Vue.js CLI 插件。

VUE-CLI-PLUGIN-TAURI

Tauri 团队创建了一个 Vue.js CLI 插件,我们来安装它:

vue add tauri

它将要求你提供窗口标题。只需输入 nota 并按“Enter”即可。我们研究一下 Tauri 插件引入的更改。

Package.json

Tauri 插件在 package.json 文件的 scripts 部分中添加了两个脚本:

"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 crates 即可。

完成上述操作后,你应该有了当前操作系统使用的 nota 二进制文件。我这边在 src-tauri/target/release/bundle/deb/ 目录中创建了一个.deb 二进制文件。

  跨平台  

你可能已经注意到,yarn tauri:build 命令刚刚为你的操作系统生成了一个二进制文件。因此,让我们为其他操作系统生成对应的二进制文件。为此我们将在 GitHub 上设置一个工作流。我们在这里使用 GitHub 作为跨平台应用的分发媒体。因此,你的用户只需在项目的“Release”选项卡中下载二进制文件即可。我们将实现的工作流会通过 GitHub actions 的功能自动为我们构建二进制文件。

创建 Tauri 工作流

感谢 JacobBolda,我们有了一个工作流,可以通过 GitHub 上的 Tauri 自动创建和发布跨平台应用。除了为各种平台(Linux、macOS 和 Windows)构建二进制文件外,该动作还将为你上传二进制文件作为 GitHub 上的发行版。它还使用了 Jacob 制作的 Createa 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/create-release@v1.1.0
        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/upload-release-asset@v1.0.2
        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/upload-release-asset@v1.0.2
        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 上存储库页面上的“Release”中查看发行版草稿。然后你就可以发布你的版本了!

    小结    

本文介绍了一种多语言工具链,用于构建安全、跨平台的小体积原生应用。我们已经了解了 Tauri 的概况,以及如何将其与 Vue.js 搭配使用。最后,我们运行 yarn tauri:build 打包了我们的第一个 Tauri 应用,并且我们还使用了 GitHub 动作为 Linux、macOS 和 Windows 创建二进制文件。

有任何疑问,你可以加入 Discord 服务器:

https://discord.gg/SpmNs4S

延伸阅读

https://www.smashingmagazine.com/2020/07/tiny-desktop-apps-tauri-vuejs/

  • 1
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值