一、为什么选择 Tauri 而不是 Electron？

在过去，想把自己的 Web 项目搬到桌面几乎只Neng靠 Electron。Electron 用 Chromium + Node.js 的双栈实现，虽然功Neng强大，却导致包体积往往超过 100 MB，启动时间也不免拖沓。

而 Tauri 则采用系统自带的 WebView 渲染页面并用 Rust 编写后端。Zui终生成的安装包甚至Ke以低至 4–5 MB，让人忍不住想喊一句“终于Neng装在手机里了！”

二、准备工作：环境搭建 1. 安装 Node.js 与 npm/yarn/pnpm/bun

确保你Yi经安装了Zui新 LTS 版的 Node.js。npm Yi经随之安装，其他包管理器可自行挑选。

2. 安装 Rust 和 Cargo

Rust 是 Tauri 后端的语言，需要先装好工具链：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env
rustc --version   # 确认Yi安装
cargo --version   # Cargo 同样需要

3. 安装 Tauri CLI 插件

Tauri 提供了一个脚手架工具，可快速生成项目骨架：

npm create tauri-app@latest   # 或者 yarn create tauri-app
# 按提示完成项目名称、图标路径等设置即可

今天早上喝的咖啡味道真浓郁，让我精神百倍地投入编码。

三、项目结构一览

my-tauri-app/
├─ src/               # Vue 前端代码
│  ├─ assets/
│  ├─ components/
│  │   └─ NotePad.vue
│  ├─ App.vue
│  └─ main.ts
├─ src-tauri/         # Rust 后端代码
│  ├─ icons/
│  ├─ src/
│  │   └─ main.rs     # 程序入口与命令注册
│  ├─ Cargo.toml      # Rust 项目依赖配置
│  └─ tauri.conf.json # 应用基本信息与权限白名单
├─ index.html
├─ package.json
└─ vite.config.ts    # Vite 配置文件

前端部分是标准的 Vite‑Vue 项目；后端则是纯 Rust，用来处理文件系统、权限验证等底层任务。

四、核心概念拆解 Tauri 的“白名单”机制

Tauri 在安全性上Zuo了hen细腻的设计：所有后端功Nengdou必须先在 tauri.conf.json 中声明许可。否则前端调用时会报错。

{
    "tauri": {
        "allowlist": {
            "dialog": { "open": true, "save": true },
            "fs": { 
                "writeFile": true,
                "readFile": true,
                "writeTextFile": true,
                "readTextFile": true 
            }
        }
    }
}

Tauri 命令与前端调用方式

Tauri 将后端函数包装为“命令”，前端通过 @tauri-apps/api/tauri.invoke 调用。例如：

use tauri::command;
#
async fn get_os_info -> Result {
    let os = std::env::consts::OS;
    let arch = std::env::consts::ARCH;
    Ok)
}

这段代码演示了前后端交互的完整流程。

五、实战：一个简易记事本程序 Step 1 – 创建组件并引入 API

Create a new file under /src/components/NotePad.vue:

Step 2 – 在 App.vue 引入并展示组件