1- Tauri 教程

1.1- 什么是 Tauri？

Tauri 是一个轻量级、高性能的跨平台桌面应用开发框架，结合了 Rust 和 Web 技术（如 HTML、CSS 和 JavaScript）。它允许开发者使用熟悉的前端技术构建桌面应用，同时利用 Rust 提供的高性能和安全性。

1.2- Tauri 的特点

• 小体积：生成的应用程序通常只有几 MB。
• 高性能：启动速度快，内存占用低。
• 安全性强：Rust 提供内存安全，减少常见漏洞。
• 跨平台支持：支持 Windows、macOS 和 Linux。
• 灵活性：兼容多种前端框架（如 React、Vue、Angular 等）。

---

2- 环境准备

2.1- 安装必要工具

在开始之前，请确保你的开发环境满足以下要求：

• Rust：Tauri 的后端核心语言。
• Node.js：用于前端开发。
• Tauri CLI：用于管理 Tauri 项目。

2.1.1- 安装步骤

1. 安装 Rust
   打开终端，运行以下命令安装 Rust：

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

   验证安装是否成功：

   rustc --version
   

2. 安装 Node.js
   从 Node.js 官网 下载并安装最新版本。验证安装：

   node -v
   npm -v
   

3. 安装 Tauri CLI
   使用 npm 安装 Tauri 的命令行工具：

   npm install -g @tauri-apps/cli
   

   验证安装：

   tauri --version
   

---

3- 创建第一个 Tauri 项目

3.1- 初始化项目

1. 创建一个新的前端项目（以 Vue 为例）：

   npm create vite@latest my-tauri-app --template vue
   cd my-tauri-app
   

2. 初始化 Tauri：

   npx tauri init
   

   在初始化过程中，你需要配置应用名称、窗口大小等。完成后，项目目录中会新增一个 src-tauri 文件夹。

3.2- 项目结构

Tauri 项目的目录结构如下：

my-tauri-app/
├── src/                # 前端代码
├── src-tauri/          # Tauri 配置和 Rust 代码
│   ├── src/
│   │   └── main.rs     # Rust 主程序
│   ├── tauri.conf.json # Tauri 配置文件

---

4- 编写代码

4.1- 配置 Tauri 窗口

打开 src-tauri/tauri.conf.json，修改窗口配置：

"windows": [
  {
    "label": "main",
    "url": "http://localhost:3000",
    "width": 800,
    "height": 600,
    "resizable": true
  }
]

4.2- 前端与后端交互

Tauri 提供了一个命令系统，允许前端调用 Rust 函数。以下是一个简单的示例：

4.2.1- Rust 后端代码（src-tauri/src/main.rs）

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

4.2.2- 前端代码（以 Vue 为例）

<script setup>
import { invoke } from '@tauri-apps/api';

const greet = async () => {
  const name = 'Tauri User';
  const message = await invoke('greet', { name });
  alert(message);
};
</script>

<template>
  <button @click="greet">Greet</button>
</template>

---

5- 运行与调试

5.1- 启动开发环境

运行以下命令启动 Tauri 应用：

npm run tauri dev

此时会弹出一个窗口，显示你的前端页面。

5.2- 打包应用

当开发完成后，可以使用以下命令打包应用：

npm run tauri build

打包后的文件会存放在 src-tauri/target/release 目录下。

---

6- 示例项目：简单的记事本应用

6.1- 功能描述

• 用户可以输入文本并保存到本地文件。
• 支持跨平台运行。

6.2- 实现步骤

6.2.1- 前端代码

<script setup>
import { writeTextFile, BaseDirectory } from '@tauri-apps/api/fs';

const saveNote = async (content) => {
  await writeTextFile('note.txt', content, { dir: BaseDirectory.App });
  alert('Note saved!');
};
</script>

<template>
  <textarea v-model="noteContent" placeholder="Write your note here..."></textarea>
  <button @click="saveNote(noteContent)">Save Note</button>
</template>

6.2.2- 后端代码

无需额外修改，Tauri 提供了文件系统 API。

---

7- Tauri 与 Electron 的对比

特性	Tauri	Electron
应用体积	小（几 MB）	大（几十到几百 MB）
性能	高（启动快，内存占用低）	较低（依赖 Chromium）
安全性	高（Rust 提供内存安全）	较低（基于 JavaScript）
前端框架支持	React、Vue、Angular 等	React、Vue、Angular 等
开发难度	需要学习 Rust	仅需 Web 技术

---

8- 总结与扩展

通过本教程，你已经掌握了 Tauri 的基础知识和开发流程。Tauri 的轻量级特性和高性能使其成为构建跨平台桌面应用的理想选择。接下来，你可以尝试：

• 深入学习 Rust，提升后端开发能力。
• 探索 Tauri 的高级功能，如系统托盘、通知等。
• 将 Tauri 应用于实际项目中，例如任务管理器、文件管理器等。