Tauri 2.0 桌面开发：抛弃 Electron！用 Rust + Vue3 开发一个 5MB 大小的“股票盯盘助手”

标签：#Tauri #Rust #Vue3 #桌面开发 #高性能 #Electron替代

📉 前言：为什么 Electron 越来越不受待见？

Electron 本质上是把一个完整的 Chrome 浏览器塞进了你的安装包里。

• Electron: 这里的代码 + Node.js +Chromium 内核= 120MB 安装包。
• Tauri: 这里的代码 + Rust 二进制 +系统原生 WebView= 4MB 安装包。

Tauri 2.0 不仅继承了轻量的优势，还打通了移动端 (iOS/Android)，实现了真正的“一次编写，到处运行”。

架构对比图 (Mermaid):

🛠️ 一、 环境准备

你需要安装 Rust 编译环境和 Node.js。

1. 安装 Rust:curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
2. 创建项目:

npmcreate tauri-app@latest

• Project name:stock-ticker
• Identifier:com.stock.ticker
• Frontend flavor:Vue
• Option:TypeScript

🎨 二、 前端开发：画一个精美的“小组件”

我们的目标是做一个像 Windows 小组件一样的悬浮窗。
在src/App.vue中，我们画一个简洁的卡片。

<scriptsetuplang="ts">import{ref,onMounted}from"vue";import{invoke}from"@tauri-apps/api/core";// Tauri 2.0 核心 APIconstprice=ref("Loading...");constpercent=ref("0.00%");constisUp=ref(true);// 调用 Rust 后端获取数据asyncfunctionfetchStock(){try{// 'get_stock_data' 是我们稍后在 Rust 里定义的函数名constdata:any=awaitinvoke("get_stock_data",{symbol:"AAPL"});price.value=data.price;percent.value=data.percent;isUp.value=!data.percent.startsWith("-");}catch(e){console.error(e);}}onMounted(()=>{fetchStock();// 每 3 秒刷新一次setInterval(fetchStock,3000);});</script><template><divclass="container":class="{ up: isUp, down: !isUp }"><divclass="symbol">AAPL</div><divclass="price">${{ price }}</div><divclass="percent">{{ percent }}</div></div></template><stylescoped>/* 简单的红涨绿跌样式，背景透明 */.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:rgba(0,0,0,0.6);/* 半透明黑底 */color:white;border-radius:12px;user-select:none;/* 禁止选中文本，像原生 App */}.up .price{color:#ff5252;}.down .price{color:#4caf50;}</style>

🦀 三、 后端开发：Rust 的高性能网络请求

为什么不用 JS 的fetch？

1. 跨域问题 (CORS)：网页端请求金融 API 经常遇到跨域，Rust 后端完全无视 CORS。
2. 安全性：API Key 藏在 Rust 二进制里，比暴露在前端 JS 里安全得多。

1. 添加依赖 (src-tauri/Cargo.toml)

我们需要一个 HTTP 客户端和一个 JSON 解析库。

[dependencies] tauri = { version = "2.0.0", features = [] } serde = { version = "1", features = ["derive"] } serde_json = "1" reqwest = { version = "0.11", features = ["json", "blocking"] } # 简化演示用 blocking

2. 编写 Rust 逻辑 (src-tauri/src/lib.rs)

usetauri::command;useserde::Serialize;// 定义返回给前端的数据结构#[derive(Serialize)]structStockData{price:String,percent:String,}// 宏定义：这是一个可以被 JS 调用的命令#[command]fnget_stock_data(symbol:String)->StockData{// 真实场景请替换为真实的 API (如 Yahoo Finance, Alpha Vantage)// 这里模拟一个随机波动的数据println!("Frontend is asking for: {}",symbol);// 模拟 HTTP 请求耗时// let resp = reqwest::blocking::get(...).unwrap();StockData{price:format!("{:.2}",150.0+(rand::random::<f64>()*10.0)),percent:format!("{:.2}%",rand::random::<f64>()*2.0-1.0),}}#[cfg_attr(mobile, tauri::mobile_entry_point)]pubfnrun(){tauri::Builder::default()// 注册命令.invoke_handler(tauri::generate_handler![get_stock_data]).run(tauri::generate_context!()).expect("error while running tauri application");}

实际运行图

🪟 四、 窗口定制：打造“原生小组件”感

为了让它不像一个浏览器窗口，我们需要修改src-tauri/tauri.conf.json。
我们要去掉标题栏，设定固定大小，并允许透明。

{"app":{"windows":[{"title":"StockTicker","width":200,// 很小，只显示关键信息"height":120,"decorations":false,// 去掉标题栏和边框"transparent":true,// 开启背景透明"alwaysOnTop":true,// 永远置顶 (盯盘必备)"resizable":false}]}}

📊 五、 结果对比：碾压级的胜利

运行npm run tauri build进行打包。我们将最终产物与同样的 Electron 项目进行对比。

内存占用对比 (Mermaid):

🎯 总结

Tauri 2.0 让我们看到了一种新的可能：在享受 Web 开发的高效率（Vue/React）的同时，拥有原生应用的高性能（Rust）。

虽然 Rust 有一定的学习门槛，但对于普通的桌面应用，你只需要掌握最基础的 Rust 语法（结构体、函数、HTTP 请求）即可。剩下的 UI 交互，依然是你最熟悉的 HTML/CSS/JS。

Next Step:
尝试给这个小组件加一个系统托盘图标（System Tray）。在 Tauri 中，你可以在 Rust 端轻松创建系统托盘，实现“右键菜单 -> 退出应用”或“切换股票”的功能。