使用 React 和 Vite 使用 Tauri 构建番茄钟

Tauri是一组工具，可让您使用前端框架构建跨平台桌面应用程序。当与 React 和 Vite 结合使用时，它可以用于为所有桌面平台构建极其快速的二进制文件。

开发人员可以使用 Tauri 通过 Web 技术编写安全、精简和快速的跨平台桌面应用程序。对于许多开发人员来说， Electron通常是这些应用程序的首选框架，但 Tauri 现在已经做好了竞争的准备。

在这篇文章中，我们将构建一个简单的番茄钟计时器，我邀请您按照自己的节奏学习本教程。

它“非常快”（他们的话，不是我的话；但请点击链接查看基准并自行决定），因为它使用 Rust 作为后端（相对于 Node），生成更小的二进制文件，并且比 Node 更安全。

它使用底层操作系统提供的 WebView 来呈现应用程序的 UI——这是应用程序二进制文件更小的原因之一（与电子相比）。Tauri 工具包中的 WRY 库提供了一个统一的接口来与不同操作系统提供的 WebView 进行交互。WRY 库使用 Tao crate 进行跨平台窗口管理。

Tauri 将这一切结合在一起，使开发人员能够编写强大且高性能的桌面应用程序。

先决条件

在开始之前，我们需要安装一些东西。

锈

要安装 Rust，请打开终端并运行：

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

如果您使用的是 Windows，请按照这些说明进行操作。

npm

npm 是 Node 的包管理器。它与 Node 捆绑在一起，所以如果你的系统上安装了 Node，你很可能也有 npm。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

如果您没有 Node，请使用Homebrew安装它，

冲泡安装节点

安装好 npm 和 Rust 后，我们就可以开始使用 Tauri 开发应用程序了！

使用 create-tauri-app 搭建 Tauri 应用程序

由于现在已经安装了先决条件，我们可以开始开发我们的番茄计时器桌面应用程序。Tauri 的人们使用create-tauri-app npm 包使搭建应用程序变得超级简单。

要开始，请运行：

npx创建- tauri -应用程序

运行此命令后，您将需要输入一些信息：

• 项目名称

• 应用程序将在其中加载的窗口的标题

• 用户界面配方

• 要使用的模板

对于本教程应用程序，我使用了以下内容，如下所示

• 项目名称为pomodoro

• 窗口标题为Pomodoro Timer App

• UI 配方为create-vite

• 要使用的模板react-ts

然后按Enter将安装所有必要的包，并在与项目名称相同的文件夹下输出一个脚手架项目。

我们现在都准备好第一次运行这个项目了！

---

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay

• 使用 React 的 useEffect优化应用程序的性能

• 在多个 Node 版本之间切换

• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri，一个用于构建二进制文件的新框架

• 比较NestJS 与 Express.js

• 发现TypeScript 领域中使用的流行 ORM

---

要运行项目，请运行：

cd pomodoro // cding到项目文件夹
npm run tauri dev //运行应用

这将首先启动前端服务器，然后将下载 crates（如果需要）并编译 Rust 后端。一旦编译没有任何错误，应用程序将启动，您将看到如下内容：

项目文件夹包含很多重要的文件和文件夹。我们将在本教程中处理的两个是：

• src文件夹

• src-tauri/tauri.config.json文件

首次运行该应用程序需要一些时间，因为该应用程序需要下载并编译必要的 rust crates。