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

每隔一个星期二，我们都会发送一份时事通讯，介绍有关前端和用户体验的有用技术。在您的收件箱中订阅并获取智能界面设计核对表PDF。

技术让我们的生活变得更美好，不仅仅是用户，还有创造者(开发者和设计师)。在这篇文章中，我将向您介绍Tauri。在以下情况下，本文将对您有所帮助：

您一直在使用HTML、CSS和JavaScript在Web上构建应用程序，并且您希望使用相同的技术来创建针对Windows、MacOS或Linux平台的应用程序；

你已经在用像Electron这样的技术构建跨平台的桌面应用程序，并且你想尝试一下替代方案；

您是Rust爱好者，并且希望将其应用于构建本机跨平台应用程序。

我们将了解如何从现有的Web项目构建本地跨平台应用程序。我们开始吧！

Tauri是一个多语言工具链，用于使用小型和快速的二进制文件构建更安全的原生应用程序。我所说的“多语种”是指Tauri使用多种编程语言。目前，使用的是Rust、JavaScript和TypeScript。但是有计划允许您使用Go、C++、Python等。

它允许您使用任何基于HTML和JavaScript的前端框架(如Vue.js、Reaction或ANGLE)来构建本地桌面应用程序，并且可以集成到任何管道中。

它可以帮助您为主要的桌面平台(即将推出的移动和WebAssembly)构建和捆绑二进制文件。

因此，基本上，Tauri允许你使用网络技术来创建微型的、安全的原生桌面应用程序。

在它的GitHub页面上，Tauri被描述为一个与框架无关的工具链，用于构建高度安全的本地应用程序，这些应用程序具有很小的二进制文件(即文件大小)，并且非常快(即最小的RAM使用量)。

然而，电子应用程序的捆绑包相当大，而且它们在运行时往往会占用大量内存。以下是Tauri与Electron的比较：

内存Tauri应用程序的占用空间还不到Electron应用程序的一半。

Tauri可以重新授权许可证，但Electron不行。电子产品开箱即带铬合金。然而，Chromium包含一个名为Widevine的数字版权管理系统。在Chromium中包含WideVine使得使用Electron创建的应用程序不受PureOS等平台用户的欢迎，唯一的原因是它不是免费/libre开源软件(FLOSS)。像PureOS这样的平台是由自由软件基金会(FSF)验证的。这意味着他们只能在自己的应用商店发布免费和开源软件。

简而言之，如果您的应用程序是使用Electron构建的，它将永远不会在PureOS商店正式发布。这应该是针对此类发行版的开发人员所关注的问题。

安全对Tauri团队来说真的很重要。用Tauri创建的应用程序从一开始就应该是安全的。

Tauri与任何前端框架都兼容，因此您不必更改堆栈。

Tauri让你可以把你为网络构建的代码库变成一个原生桌面应用程序，而不需要做任何改变。

虽然您可以在基于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)的通用文件类型分发。

首先，在您的GUI框架中创建一个界面，并准备好HTML、CSS和JavaScript以供使用。

Tauri Node.js CLI接受它，并根据您的配置装配防锈流道。

在构建模式下，它会装配捆绑器，并根据您的设置创建最终的应用程序。

现在您已经了解了Tauri是什么以及它是如何工作的，让我带您完成使用Tauri进行开发的机器设置。

注意：这里的设置是针对Linux机器的，但也提供了MacOS和Windows版的指南。

Tauri的多语言特性意味着它需要许多工具依赖项。让我们从安装一些依赖项开始。运行以下命令：

一旦上述操作成功，就继续安装Node.js(如果您还没有)，因为Tauri需要它的运行时。您可以通过运行以下命令来执行此操作：

这将安装NVM(Node.js版本管理器)，它允许您轻松管理Node.js运行时并在Node.js版本之间轻松切换。安装后，运行以下命令查看Node.js版本列表：

在撰写本文时，最新版本是14.1.0。按如下方式安装：

一旦完全设置好Node.js，您将需要安装Rust编译器和Rust包管理器：Cargo。下面的命令将同时安装这两个命令：

运行此命令后，通过运行以下命令确保Cargo和Rust位于您的$PATH中：

根据Tauri文档，通过运行以下命令确保您使用的是最新版本：

哇！您离让您的机器100%为Tauri做好准备又近了一步。现在剩下的就是安装Tauri-bundler板条箱了。最好退出CLI，并在新的CLI窗口中运行以下命令：

尤里卡!。如果一切正常，您的机器现在可以使用Tauri了。接下来，我们将开始集成Tauri和Vue.js。我们开始吧！

Tauri团队建议安装Yarn包管理器。所以让我们这样安装它：

现在我们已经安装了Tauri，让我们捆绑一个现有的Web项目。您可以在Netlify上找到该项目的现场演示。继续分叉存储库，它将充当shell。分叉之后，确保通过运行以下命令克隆分叉：

您的应用程序应该在localhost：8080上运行。杀死正在运行的服务器，让我们为Tauri安装Vue.jsCLI插件。

Tauri团队创建了一个Vue.js CLI插件，它可以快速地将您的Vue.js单页应用程序(SPA)转换为一个既快速又安全的小型跨平台桌面应用程序。让我们安装该插件：

插件安装完成后(这可能需要一段时间)，它会要求您输入窗口标题。只需键入nota，然后按“回车”即可。

Tauri插件在我们的Package.json文件的脚本部分添加了两个脚本。它们是：

以上将下载启动我们的应用程序所需的铁锈板条箱。之后，它将在开发模式下启动我们的应用程序，在那里它将创建一个WebView窗口，其中包含调试和热模块重新加载！

您还会注意到，插件将src-tauri目录添加到应用程序目录的根目录中。在这个目录中有Tauri用来配置桌面应用程序的文件和文件夹。让我们来看看里面的内容：

我们需要做的唯一更改是在src-tauri/cargo.toml中。cargo.toml类似于Rust的Package.json文件。在Cargo.toml中找到以下行：

注意：与开发窗口一样，第一次运行此窗口时，收集锈箱并构建所有内容将需要一些时间。在随后的运行中，它只需要重建Tauri板条箱本身。

当上述操作完成后，您当前操作系统的二进制文件应该是nota。对于我来说，我在src-tauri/target/release/bundle/deb/目录中创建了一个.deb二进制文件。*。

您可能已经注意到了，纱线Tauri：build命令刚刚为您的操作系统生成了一个二进制文件。那么，让我们为其他操作系统生成二进制文件。为此，我们将在GitHub上设置一个工作流。我们在这里使用GitHub作为跨平台应用程序的分发媒介。因此，您的用户只需在项目的“Release”选项卡中下载二进制文件，我们将实施的工作流程将通过GitHub操作的功能自动为我们构建二进制文件。我们开始吧。

多亏了雅各布·博尔达(Jacob Bolda)，我们有了一个在GitHub上使用Tauri自动创建和发布跨平台应用的工作流程。除了为各种平台(Linux、Mac和Windows)构建二进制文件之外，该操作还将为您上传二进制文件作为GitHub上的发行版。它还使用Jacob所做的Create a Release操作来实现这一点。

要使用此工作流，请在nota-web的根目录中创建.github目录。在此目录中，创建另一个名为WORKFLOWS的目录。然后，我们将在.github/workflow/中创建一个工作流文件，并将其命名为Release-Tauri-app.yml。

在release-tauri-app.yml中，我们将添加构建Linux、MacOS和Windows二进制文件的工作流。此工作流程还会将二进制文件作为草案版本上传到GitHub上。每当我们推送到主服务器时，工作流都会被触发。

名称：Release-Tauri-appon：推送：分支：-主路径：-'；**/Package.json'；作业：check-build：run-on：ubuntu-最新超时-分钟：30个步骤：-用法：操作/checkout@v2-name：安装节点使用：action/setup-node@v1 with：node-version：12-name：install ruust稳定使用：action-rs/toolchain@v1 with：toolchain：稳定配置文件：Minimal-Name：install webkit2gtk run：|sudo apt-get update sudo apt-get install-y webkit2gtk-(使用：ToolChain：稳定配置文件：Minimal-Name：install webkit2gtk run：|sudo apt-get update sudo apt-get install-y webkit2gtk-。-bundler--force-name：Build Tauri应用程序运行：纱线Tauri：Build Create-Release：Needes：Check-Build Run-On：Ubuntu-最新输出：Release_Upload_URL：${steps.create_Tauri_release ase.outputs.Upload_url}}步骤：-用法：Actions/checkout@v2-name：安装节点使用：Actions/Setup-node@v1 with：node-version：12-name：get version run：echo：：set-en.。require('；./package.json'；).version"；)名称：创建版本id：CREATE_TAURI_RELEASE使用：jbolda/[email protected]环境：GITHUB_TOKEN：${Secrets.GITHUB_TOKEN}}WITH：TAG_NAME：${matrix.Package.name}}-v${env.PACKAGE_VERSION}}RELEASE_NAME：'；Release nota app v${env.PACKAGE_VERSION}}'；请参阅要下载并安装此版本的资产。'；草稿：真预发布：FALSE创建并上载资产：需要：创建-发布运行：${matrix.platform}}超时-分钟：30策略：FAST：FALSE矩阵：平台：[Ubuntu-Latest，MacOS-Latest，WINDOWS-LATEST]包括：-Platform：Ubuntu-Latest buildFolder：Bundle/Deb ext：\_0.1.0_amd64.deb压缩：'；-平台：MacOS-LATEST buildFolder：Bundle/OSX EXT：.APP COMPRESSED：.tgz-Platform：Windows-LATEST buildFolder：'；'；EXT：.x64.msi COMPRESSED：'；'；步骤：-使用：Actions/checkout@v2-name：安装节点使用：Actions/Setup-node@v1 With：Node-Version：12-Name：Install Ruust稳定使用：Actions-rs/Toolchain@v1 With：ToolChain。Ubuntu-LATEST'；运行：|sudo apt-get update sudo apt-get install-y webkit2gtk-4.0-run：纱线名称：为Tauri应用程序构建nota运行：纱线构建-运行：货物安装Tauri-bundler--force-name：构建Tauri应用程序运行：纱线Tauri：Build-Name：Compress(仅限MacOS)if：matrix.platform=='；MacOS-Latest'；Working-。，matrix.buildFolder)}}运行：tar-czf${{format('；nota{0}{1}'；，matrix.ext，matrix.压缩)}}${{format('；nota{0}'；，matrix.ext)}}-Name：上载版本资产id：Upload-Release-Asset用途：Actions/[email protected] env：giHub_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.combedded)}}ASSET_NAME：${{format('；nota{0}{1}'；，matrix.ext，matrix.combedded)}}ASSET_CONTENT_TYPE：application/zip-name：在调试模式下构建Tauri应用运行：纱线Tauri：build--debug-name：Compress(仅限MacOS)if：matrix.platform=='；./src-tauri/target/debug/{0}'；，matrix.buildFolder)}}运行：tar-czf${{format('；nota{0}{1}'；，matrix.ext，matrix.压缩)}}${format('；nota{0}'；，matrix.ext)}}-name：在id：Upload-Release-ASSET-DEBUG-MODE上上载调试模式的发布资产使用：Actions/[email protected] env：giHub_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.combedded)}}ASSET_NAME：${{format('；nota-debug{0}{1}'；，matrix.ext，matrix.压缩)}}ASSET_CONTENT_TYPE：应用程序/zip。

要测试工作流，请提交更改并将其推送到分支的主分支。成功推送到GitHub后，您可以单击GitHub中的“Actions”选项卡，然后单击“Check Build”链接查看进度