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

2020-07-17 03:35:22

每隔一个星期二,我们都会发送一份时事通讯,介绍有关前端和用户体验的有用技术。在您的收件箱中订阅并获取智能界面设计核对表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”链接查看进度