玩转Tauri：前端开发者的桌面应用新选择（入门系列一）

本文链接：https://blog.csdn.net/weixin_42072714/article/details/147521524

Tauri是什么？

简单来说，Tauri是一个让你用前端技术（就是那些HTML、CSS、JavaScript/TypeScript）来开发桌面应用的工具。它和Electron有点像，但更轻巧、更快、更安全。为啥？因为它用了系统自带的Webview来显示界面，后端用Rust来写，而不是像Electron那样把整个Chrome浏览器都打包进去。

如果你是个前端开发者，Tauri简直就是为你量身定做的！你可以继续用你熟悉的前端技术，不用从头学一套新东西。

Tauri vs Electron：为啥要选Tauri？

特性	Tauri	Electron
应用大小	超小（就2-3MB）	超大（动不动就100MB+）
内存占用	省内存	吃内存
安全性	默认就很安全，权限控制很细	默认啥都能干，有点危险
前端框架	随便用（React、Vue、Svelte都行）	也是随便用
打包工具	想用啥用啥（Vite、Webpack都行）	也是想用啥用啥
后端语言	Rust	Node.js
学习难度	对前端友好，但要学点Rust	对前端特别友好

学Rust难不难？实话实说

虽然Tauri对前端开发者很友好，但学Rust确实有点挑战。别担心，我来告诉你可能会遇到哪些坎儿：

1. 所有权系统（这个最头疼）

Rust的所有权系统是它最特别的地方，也是新手最头疼的：

每个值都有个"主人"
同一时间只能有一个"主人"
当"主人"不在了，值就自动被清理了

这和JavaScript完全不一样，需要花点时间适应。

2. 类型系统（比TypeScript还严格）

Rust的类型系统比JavaScript严格多了：

每个变量都要说清楚是什么类型
不会自动帮你转换类型
泛型比TypeScript复杂多了

3. 错误处理（和try-catch说拜拜）

Rust的错误处理方式和JavaScript完全不一样：

用Result和Option来处理错误
必须处理所有可能的错误
没有try-catch这种东西

4. 并发编程（和async/await不太一样）

Rust的并发模型和JavaScript的异步编程不太一样：

也有async/await，但实现方式不同
线程安全是编译时就检查的
要理解Send和Sync这些概念

5. 编译时间（有点慢）

Rust编译起来有点慢：

第一次编译可能要等几分钟
依赖越多，编译越慢
要习惯这种节奏

学习小贴士

慢慢来：别想着一口吃成胖子，从基础开始
多动手：做点小项目，别光看书
用好这些资源：
- Rust官方文档（最权威）
- Rust by Example（边看边练）
- Rustlings（互动练习，超好玩）
别害羞：Rust社区超友好，有问题就问

记住：用Tauri不需要成为Rust专家，懂点基础就够了！

环境搭建：超简单！

配置环境就这一次，之后就可以专心写前端代码了。

需要准备啥？

Node.js（这个你肯定有了）
Rust（新东西，但装起来很简单）
系统依赖（看你的操作系统）

安装步骤

1. 装Rust（所有系统都行）

# 装Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# Windows用户直接去 https://www.rust-lang.org/tools/install 下载安装包

2. 装系统依赖

Windows用户：
装好WebView2和Visual Studio构建工具就行。

macOS用户：

xcode-select --install

Linux用户：

# Debian/Ubuntu
sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

3. 创建项目

用你习惯的包管理工具：

# 用NPM
npm create tauri-app@latest my-tauri-app

# 用Yarn
yarn create tauri-app my-tauri-app

# 用PNPM
pnpm create tauri-app my-tauri-app

然后它会问你用啥前端框架（React、Vue、Svelte随便选）和构建工具（Vite、Webpack都行）。

项目结构：一目了然

my-tauri-app/
├── src/                # 前端代码（你主要在这干活）
│   ├── components/     # UI组件
│   ├── assets/         # 图片啥的
│   └── main.js         # 前端入口
├── src-tauri/          # Tauri/Rust后端（设置好就不用老动了）
│   ├── src/            # Rust代码
│   │   └── main.rs     # Rust入口
│   ├── Cargo.toml      # Rust依赖
│   └── tauri.conf.json # Tauri配置
└── package.json        # 前端依赖（这个你熟）

大部分时间你都在src目录写前端代码，用你熟悉的方式开发。src-tauri目录主要是Rust代码和配置，设置好之后基本不用动。

开发流程：和平时一样

# 开发模式（热更新）
npm run tauri dev

# 打包
npm run tauri build

npm run tauri dev会同时启动前端服务器和Tauri应用，你可以继续用熟悉的热更新开发。

总结

Tauri让你能用前端技术开发高性能的桌面应用，不用放弃你熟悉的技术栈。虽然要装Rust环境，但实际开发中主要还是写前端代码，Tauri会帮你处理后端那些复杂的东西。

下一篇文章我们会聊聊怎么在Tauri项目里搭建一个爽快的前端开发环境，还有怎么选最适合你的前端框架。