create-tauri-app 使用指南：快速构建跨平台Tauri应用的脚手架工具

工具介绍

create-tauri-app 是一个用于快速创建 Tauri 应用程序的脚手架工具。它简化了 Tauri 项目的初始化过程，提供了多种前端框架模板选择，让开发者能够专注于应用开发而不是配置。

Tauri 是一个使用 Rust 构建的框架，用于创建轻量级、高性能的桌面应用程序，支持 Windows、macOS 和 Linux 平台。

安装方法

首先确保系统已安装 Node.js (推荐 LTS 版本)，然后运行以下命令安装工具：

npm create tauri-app@latest
# 或
yarn create tauri-app
# 或
pnpm create tauri-app

使用方法

1. 创建新项目

运行以下命令并按照提示操作：

npm create tauri-app@latest

交互式命令行会引导你完成项目创建：

1. 输入项目名称
2. 选择包管理器 (npm/yarn/pnpm)
3. 选择前端框架 (Vanilla/React/Vue/Svelte/Solid等)
4. 选择 UI 框架 (可选)
5. 选择 TypeScript 或 JavaScript

2. 项目结构

创建的项目通常包含以下关键部分：

your-project/
├── src/                 # 前端源代码
├── src-tauri/           # Tauri Rust 后端代码
│   ├── Cargo.toml       # Rust 项目配置
│   ├── src/             # Rust 源代码
│   └── tauri.conf.json  # Tauri 应用配置
├── package.json         # 前端项目配置
└── ...                  # 其他配置文件

3. 开发与构建

# 进入项目目录
cd your-project

# 开发模式 (热重载)
npm run tauri dev

# 生产构建
npm run tauri build

示例

创建 React + TypeScript 项目

npm create tauri-app@latest
# 选择项目名: my-app
# 选择包管理器: npm
# 选择框架: React
# 选择语言: TypeScript

修改 Rust 后端代码

编辑 src-tauri/src/main.rs 添加自定义命令：

// 定义一个Tauri命令
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

fn main() {
    tauri::Builder::default()
        // 注册greet命令处理器
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("运行Tauri应用时出错");
}

前端调用 Rust 命令 (React 示例)

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

function App() {
  const [greeting, setGreeting] = useState('');

  async function sayHello() {
    // 调用Rust后端的greet命令
    const response = await invoke<string>('greet', { name: 'World' });
    setGreeting(response);
  }

  return (
    <div>
      <button onClick={sayHello}>Greet</button>
      <p>{greeting}</p>
    </div>
  );
}

高级配置

修改 Tauri 配置

编辑 src-tauri/tauri.conf.json 可以修改应用配置：

{
  "build": {
    "distDir": "../dist",  // 前端构建输出目录
    "devPath": "http://localhost:3000"  // 开发服务器地址
  },
  "tauri": {
    "allowlist": {
      "all": true  // 允许所有API
    },
    "bundle": {
      "identifier": "com.example.myapp",  // 应用标识符
      "icon": ["icons/32x32.png", "icons/128x128.png"]  // 应用图标
    },
    "windows": [
      {
        "title": "My Tauri App",  // 窗口标题
        "width": 800,  // 窗口宽度
        "height": 600  // 窗口高度
      }
    ]
  }
}

完整示例Demo

下面是一个完整的Tauri应用示例，包含前端React界面和后端Rust交互：

1. 首先创建项目：

npm create tauri-app@latest
# 选择项目名: demo-app
# 选择包管理器: npm
# 选择框架: React
# 选择语言: TypeScript

1. 修改 src-tauri/src/main.rs：

// 定义Tauri命令
#[tauri::command]
fn calculate(a: f64, b: f64, op: &str) -> Result<f64, String> {
    match op {
        "+" => Ok(a + b),
        "-" => Ok(a - b),
        "*" => Ok(a * b),
        "/" => {
            if b == 0.0 {
                Err("Cannot divide by zero".to_string())
            } else {
                Ok(a / b)
            }
        }
        _ => Err("Invalid operation".to_string()),
    }
}

fn main() {
    tauri::Builder::default()
        // 注册calculate命令处理器
        .invoke_handler(tauri::generate_handler![calculate])
        .run(tauri::generate_context!())
        .expect("运行Tauri应用时出错");
}

1. 修改前端 src/App.tsx：

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

function App() {
  const [a, setA] = useState('0');
  const [b, setB] = useState('0');
  const [op, setOp] = useState('+');
  const [result, setResult] = useState('');
  const [error, setError] = useState('');

  async function calculate() {
    try {
      setError('');
      const res = await invoke<number>('calculate', { 
        a: parseFloat(a), 
        b: parseFloat(b), 
        op 
      });
      setResult(res.toString());
    } catch (err) {
      setError(err as string);
      setResult('');
    }
  }

  return (
    <div style={{ padding: '20px' }}>
      <h1>Tauri Calculator</h1>
      <div>
        <input 
          type="number" 
          value={a} 
          onChange={(e) => setA(e.target.value)} 
        />
        <select value={op} onChange={(e) => setOp(e.target.value)}>
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
        <input 
          type="number" 
          value={b} 
          onChange={(e) => setB(e.target.value)} 
        />
        <button onClick={calculate}>=</button>
      </div>
      {result && <div>Result: {result}</div>}
      {error && <div style={{ color: 'red' }}>Error: {error}</div>}
    </div>
  );
}

export default App;

1. 运行开发服务器：

npm run tauri dev

注意事项

1. 确保系统已安装 Rust 工具链 (rustup 和 cargo)
2. 不同平台可能需要额外依赖 (如 Windows 需要 WebView2)
3. 生产构建时，Tauri 会自动下载必要的构建工具

create-tauri-app 大大简化了 Tauri 应用的初始设置过程，让开发者能够快速开始构建跨平台桌面应用。