前言：为什么选择 Tauri 2.0？
Electron 本质上是把一个完整的 Chrome 浏览器塞进了你的安装包，而 Tauri 则利用系统原生 WebView。
- Electron: 代码 + Node.js + Chromium 内核 = 约 120MB 安装包。
- Tauri: 代码 + Rust 二进制 + 系统原生 WebView = 约 4MB 安装包。
Tauri 2.0 不仅继承了轻量的优势，还打通了移动端 (iOS/Android)，实现了真正的'一次编写，到处运行'。
架构对比
| 特性 | Tauri 应用 (轻量) | Electron 应用 (臃肿) |
|---|---|---|
| 前端 UI | Vue / React | HTML / JS |
| 核心进程 | Rust 二进制 (极小) | Node.js 运行时 |
| 渲染引擎 | OS 原生 WebView | Chromium 内核 (巨大) |
一、环境准备
你需要安装 Rust 编译环境和 Node.js。
- 安装 Rust:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh - 创建项目:
npm create tauri-app@latest
- Project name:
stock-ticker - Identifier:
com.stock.ticker - Frontend flavor: Vue
- Option: TypeScript
二、前端开发：画一个精美的'小组件'
我们的目标是做一个像 Windows 小组件一样的悬浮窗。在 src/App.vue 中，我们画一个简洁的卡片。
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { invoke } from "@tauri-apps/api/core";
// Tauri 2.0 核心 API
const price = ref("Loading...");
const percent = ref("0.00%");
const isUp = ref(true);
// 调用 Rust 后端获取数据
async function fetchStock() {
try {
// 'get_stock_data' 是我们稍后在 Rust 里定义的函数名
const data: any = await invoke("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>
<div class="container" :class="{ up: isUp, down: !isUp }">
<div class="symbol">AAPL</div>
<div class="price">${{ price }}</div>
<div class="percent">{{ percent }}</div>
</div>
</template>
<style scoped>
/* 简单的红涨绿跌样式，背景透明 */
.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>
