Tauri 2.0 入门:从环境搭建到项目创建

很多刚接触 Tauri 的同学都会问:"Tauri 到底是什么?和 Electron 比有什么不同?" 简单来说,Tauri 2.0 是一个轻量级的桌面应用框架,让你用前端技术(HTML/CSS/JS)开发 UI,用 Rust 编写后端逻辑。相比于 Electron,它的应用体积更小、内存占用更低、启动速度更快。

  1. 环境配置:搭建 Tauri 开发所需要的基础的运行环境
  2. 项目创建 :如何使用 create-tauri-app 快速初始化一个 Tauri 2.0 项目
  3. 目录说明:解释项目生成后的核心目录结构和文件作用

下面直接上步骤。

一、环境配置

在开始之前,你需要确保开发环境中安装了以下组件。

  1. 安装 Microsoft C++ 构建工具 :下载 Microsoft C++ 构建工具,在安装器中选择"使用 C++ 进行桌面开发"。

    • 如果您已经安装了 Visual Studio,可以通过 Visual Studio Installer 找到并安装此工作负载。

      环境配置选择界面
  2. 安装 WebView2 运行时 :Tauri 依赖 WebView2 来渲染前端界面。Windows 10(版本 1803 及以上)​ 和 Windows 11​ 已默认包含,但为了确保兼容性,建议从 WebView2 官方下载页面 安装或更新。

  3. 安装 Rust 编程语言 :访问 Rust 官网,下载并运行 rustup-init.exe

  4. 配置环境变量 :确保将 C:\Users\你的用户名\.cargo\bin​ 添加到系统的 PATH 环境变量中。

    注意:如果已经安装过 Rust,请验证 cargo --version 命令是否可用。

  5. 安装 Tauri CLI:全局安装 Tauri 的命令行工具。

    bash 复制代码
    npm install -g @tauri-apps/cli

划重点: 环境配置是 Tauri 开发的基石,特别是 C++ 构建工具和 Rust,缺一不可。如果安装过程中遇到问题,首先检查 PATH 环境变量是否正确配置。

二、创建项目

环境配置完成后,就可以通过 create-tauri-app 脚手架快速创建一个新项目。

  1. 运行创建命令

    bash 复制代码
    pnpm create tauri-app

    【T技术 提示】 create-tauri-app​ 支持多种前端框架模板,如 Vue.js、React、Svelte 等,也可以选择纯 HTML/CSS/JS。更多社区模板可在 Awesome Tauri 仓库 中查找。

  2. 填写项目信息 :按照命令行提示,输入项目名称,并选择一个您熟悉的前端模板。


    项目创建配置界面

  3. 启动开发服务器

    bash 复制代码
    cd tauri-app
    pnpm install
    pnpm tauri dev

    代码解析:

    • pnpm install:安装项目依赖(包括前端和后端的依赖)。
    • pnpm tauri dev:启动 Tauri 的开发模式,它会同时启动前端开发服务器和 Rust 后端,并弹出一个桌面应用窗口。
  4. 验证结果:启动成功后,将弹出一个包含您前端页面的桌面应用程序窗口。

三、文件目录说明

项目创建成功后,主要的目录结构如下:

目录/文件 作用
/src 前端源码目录,存放您的 Vue、React 或纯 HTML/CSS/JS 代码。
/src/assets 前端使用的静态资源(如图片、字体、样式文件等)。
/src-tauri Tauri 后端源码目录,也是 Rust 项目的根目录。
/src-tauri/src Rust 源码目录,用于编写后端逻辑、命令和状态管理。
/src-tauri/icons 存放应用程序的图标资源。
/src-tauri/capabilities Tauri 2.0 中用于配置应用的功能和权限声明文件。
/src-tauri/gen 代码生成目录,包含自动生成的数据结构和验证模式。
/src-tauri/target Rust 项目的构建输出目录(.gitignore 中已被排除)。

常见坑: 很多初学者会忽略 /src-tauri/capabilities 目录。在 Tauri 2.0 中,您必须在此目录下声明应用所需的权限(如文件系统访问、HTTP 请求等),否则相关功能将无法正常运行。

最后

以上就是搭建一个 Tauri 2.0 项目的完整流程。相比 Electron,它带来的开发和打包体验是非常清爽的。记住,环境配置是第一步,别在这上面卡太久。下一篇我们来聊聊 Tauri 2.0 中最关键的概念------命令(Commands) ,以及如何在 Rust 和前端之间安全高效地传递数据。有问题欢迎交流。

相关推荐
何忆清风5 小时前
Easy Agent Pilot - Rust实现的开源桌面Agent软件
ai·rust·vue·agent·tauri·开发工具
余识-8 天前
古竹:将时间化作最有价值的投资
金融·rust·业界资讯·tauri·投资·基金
小杍随笔8 天前
【Tauri 2 + Rust 配置 WebView2 缓存数据存储到安装目录】
开发语言·后端·rust·tauri
芳草萋萋鹦鹉洲哦9 天前
【tauri】为什么接口通信选择invoke而不是Axios
rust·axios·tauri·invoke
小妖66611 天前
用 tauri + vuepress 写的 地藏经 网站和安卓端
tauri·vuepress
小妖66613 天前
怎么用 tauri 创建编译 android 应用程序
android·tauri
Mr数据杨15 天前
AIGC工具平台-ASR通用音频转文本
tauri·ai工具
Mr数据杨15 天前
AIGC工具平台-文稿配音混剪素材视频
tauri·ai工具
Mr数据杨17 天前
AIGC工具平台-NovelAI小说自动撰写
tauri·ai工具