tauri 桌面项目

ust做tauri桌面开发

1 环境准备

• pnpm

• rust(cargo)

• WebView2 Runtime

1.1 pnpm 环境准备

pnpm 环境准备（配置国内镜像）：

使用以下命令查看 pnpm 当前的下载依赖的镜像源地址：

# 使用以下命令查看 pnpm 当前的下载依赖的镜像源地址：
pnpm config get registry

如果你想查看所有的 pnpm 配置信息，包括镜像源地址，可以使用：

pnpm config list

# 如果你想查看所有的 pnpm 配置信息，包括镜像源地址，可以使用：

如果你需要修改 registry（例如切换到淘宝镜像），可以使用：

pnpm config set registry https://registry.npmmirror.com/

如果要恢复为默认的 npm 官方源：

pnpm config set registry https://registry.npmjs.org/

1.2 rust 环境准备

1.2.1 rust 环境国内源

修改 Cargo 配置文件

• Windows：C:\Users\你的用户名\.cargo\config.toml

• Linux/macOS：~/.cargo/config.toml

清华大学镜像

# 清华大学镜像
[source.crates-io]
replace-with = "tuna"

[source.tuna]
registry = "https://mirrors.tuna.tsinghua.edu.cn/crates.io-index"

中国科技大学镜像

# 中国科技大学镜像
[source.crates-io]
replace-with = "ustc"

[source.ustc]
registry = "https://mirrors.ustc.edu.cn/crates.io-index"

1.2.2 安装tauri-cli

rust 需要安装tauri-cli

# 安装 tauri-cli
cargo install tauri-cli --locked

# 安装后查看版本
cargo tauri --version

2 创建truri项目

# 创建tauri项目，例如这里的项目名称是 my-app
pnpm create tauri-app my-app --rc

在 pnpm create tauri-app 项目名 --rc 的过程中，你会看到

\tauri>pnpm create tauri-app my-app2 --rc 
? Identifier (com.my-app2.app) › # 默认回车
Choose which language to use for your frontend ›
  TypeScript / JavaScript  (pnpm, yarn, npm, deno, bun)
❯ Rust (cargo)  # 想要访问系统api选这个
  .NET 

? Choose your UI template ›
❯ Vanilla # html css js UI
  Yew
  Leptos 
  Sycamore 
  Dioxus
  

安装好后进入my-app/src-tauri文件夹

cd my-app/src-tauri

启动

# my-app/src-tauri 文件夹内
cargo tauri dev

编译

# my-app/src-tauri 文件夹内
cargo tauri build

Identifier 的作用:

在 Tauri 项目创建过程中，Identifier 是一个用于唯一标识你的应用的字符串。它通常以反向域名格式表示，例如 com.my-app2.app

• 唯一标识：这个标识符帮助操作系统区分不同的应用程序，尤其是在生成安装包时。它相当于应用的 "ID"。

• 用于签名和证书：在发布应用到操作系统商店（如 macOS App Store 或 Windows Store）时，Identifier 会用作应用的唯一标识符，可能会出现在证书和签名中

language to use for your frontend(选择前端语言)

这三个选项的区别如下：

1. TypeScript / JavaScript: 使用前端流行的语言（TypeScript 或 JavaScript）来编写前端部分，支持多种包管理工具（如 pnpm、yarn、npm）
   适合熟悉前端开发者，通常结合框架如 Vue、React 等进行开发

2. Rust (cargo) : 使用 Rust 语言来开发 Tauri 项目的前端逻辑。适合需要更高性能和更深入系统集成的应用，且完全使用 Rust 进行开发。

3. .NET: 使用 .NET 技术栈来开发前端，适合已经在 .NET 环境下开发的开发者，能够利用 C# 等技术栈。

cd my-app/src-tarui
# 启动
cargo tauri dev
# 编译

Choose your UI template (Tauri 的 UI 模板)

• Vanilla：纯 HTML + CSS + JS/TS，不依赖任何框架，适合轻量级项目。

• Yew：Rust 语言的 Web 框架，基于 WebAssembly，类似 React。

• Leptos：Rust Web 框架，运行时更轻量，适用于高性能应用。

• Sycamore：Rust 框架，受 SolidJS 启发，使用信号系统优化 UI。

• Dioxus：Rust UI 框架，可用于 Web、桌面、移动端，类似 React，组件化设计。

前端用 JS/TS** → 选 Vanilla。

想用 Rust 开发前端** → 选 Yew（成熟）/Leptos（更轻量）/Sycamore（高性能）/Dioxus（跨平台）。

如果选项要桌面程序，使用写vue的方式写UI代码，可以访问系统api，选Rust->Vanilla

安装 Vue 3 + Vite：

pnpm install vue@next

在 index.html 里引入 Vue，或使用 Vite 搭建 Vue 项目：

pnpm create vite my-app --template vue

Vue 前端可以通过 @tauri-apps/api 访问系统 API，例如：

import { invoke } from '@tauri-apps/api/tauri';

async function getOsInfo() {
    const os = await invoke('get_os_info');
    console.log(os);
}

用 Vue 进行 UI 开发，同时用 Rust 访问系统 API，性能更强大！

3.WebView2 Runtime
WebView is a lightweight library for creating cross-platform desktop applications with web-based GUIs. Rust provides bindings for WebView, enabling seamless integration of web technologies like HTML, CSS, and JavaScript into native Rust applications. Below are two popular approaches to implement WebView in Rust

https://developer.microsoft.com/en-us/microsoft-edge/webview2?form=MA13LH&cs=3641091416#download