Tauri(二)——Tauri + React 快速入门,已开源

1,304 阅读2分钟

目标

快速构建基于 Tauri 2 + React 的桌面端应用程序,满足高效开发和跨平台需求。

快速开始

前置条件

  1. 自用的是 Mac 电脑 (Inter 版本)
  2. 因为我们暂时只打算开发桌面应用程序而不针对 ios,所以可以只用安装 Xcode 命令行工具就可以, 因为 Xcode 太大了 😄,有条件的当然建议直接安装 Xcode
xcode-select --install
  1. 因为 Tauri 使用 Rust 构建并需要它进行开发。所以我们需要安装一下 Rust
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
  1. Node 环境,作为前端,应该这部分大家都已经安装,就不多说了。

创建项目

采用 pnpm 安装,为啥用 pnpm ?此处就不多说了啊。不过也可以按照个人意愿,自行选择其它。

pnpm create tauri-app

由于公司内部的技术栈都是围绕 React,所以这块也是继续围绕 React 来构建。不过也可以按照个人意愿,自行选择其它。

image.png

打开项目代码是这样的目录与依赖配置:

image.png

项目结构

Tauri2 的项目结构通常采用模块化设计,兼顾跨平台兼容性和易维护性,而我们经常改的目录基本也是这些:

核心目录

  • src-tauri/ :存放 Rust 后端代码和 Tauri 的核心配置。

    • src-tauri/src/ :Rust 逻辑,包括命令、状态管理和插件实现。
    • src-tauri/tauri.conf.json:主配置文件,管理应用设置、权限及窗口配置。
    • src-tauri/capabilities/default.json 是 Tauri2 中的重要配置文件,用于定义应用程序的能力和权限。它控制哪些 API 可以被前端访问,确保安全性和最小权限原则。
    • src-tauri/Cargo.toml 是 Tauri 项目中 Rust 的配置文件,用于定义项目的依赖项、元数据和构建配置。它是 Rust 的包管理器 Cargo 使用的主要文件。
  • src/ :管理 UI 组件、通过 API 与 Tauri 交互的 hooks,以及全局状态管理(如 Zustand)。

    • 前端代码(如 React 或 Vue)
  • dist/build/ :打包后的前端资源(由 Vite、React 等生成)。

来运行项目,看看效果吧。

pnpm install

pnpm tauri dev

可以用浏览器打开地址,看到 Web 页面,方便调试:

Local: http://localhost:1420/

image.png

同时弹出桌面端界面:

image.png

构建项目

pnpm tauri build

image.png

image.png

image.png

image.png

参考

  1. tauri.app
  2. github.com/infinilabs/…

小结

最近在做 Tauri 的项目,也就是 github.com/infinilabs/… 目前已经开源,项目正在进行中,也希望能去给个免费的 star 🌟。

个人也是第一次做 Tauri 项目,也是在不断摸索中学习,希望有志同道合的伙伴一起摸索,一起学习进步。

本文是一个系列,应该还会继续写下去,后边也会具体介绍一些功能的详细开发过程,关注不迷路