创建项目

我们可以使用下面命令，利用 create-tauri-app 创建一个新的项目

环境	命令
Bash	`sh <(curl https://create.tauri.app/sh)`
PowerShell	`irm https://create.tauri.app/ps \| iex`
npm	`npm create tauri-app@latest`
Yarn	`yarn create tauri-app`
pnpm	`pnpm create tauri-app`
Deno	`deno run -A npm:create-tauri-app`
Bun	`bun create tauri-app`
Cargo	`cargo install create-tauri-app --locked` `cargo create-tauri-app`

创建

# 快速创建项目
➜  Tauri  yarn create tauri-app

➤ YN0000: · Yarn 4.9.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + create-tauri-app@npm:4.5.9, and 11 more.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 3 packages were added to the project (+ 3.09 MiB).
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 0s 81ms

[####] 4/4? Project name (tauri-app) › tauri-app # 项目名称
✔ Project name · tauri-app
? Identifier (com.tauri-app.app) › com.tauri-app.app # 标识符
✔ Identifier · com.tauri-app.app
? Choose which language to use for your frontend › # 前端语言
❯ TypeScript / JavaScript  (pnpm, yarn, npm, deno, bun)
  Rust
  .NET
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
? Choose your package manager › # 包管理器
  yarn
❯ pnpm
  npm
  deno
  bun
✔ Choose your package manager · yarn
? Choose your UI template › # UI模板
  Vanilla
❯ Vue
  Svelte
  React
  Solid
  Angular
  Preact
✔ Choose your UI template · Vue - (https://vuejs.org/)
? Choose your UI flavor › # UI 风格
❯ TypeScript
  JavaScript
✔ Choose your UI flavor · TypeScript

✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd tauri-app
  pnpm install
  pnpm tauri android init
  pnpm tauri ios init

For Desktop development, run:
  pnpm tauri dev

For Android development, run:
  pnpm tauri android dev

For iOS development, run:
  pnpm tauri ios dev

项目结构

[tauri-app]                      # 项目名称
├─ [node_modules]                # 前端依赖
├─ [dist]                        # 打包后的项目文件
├─ [src]                         # 前端源代码
├─ [src-tauri]                   # Tauri 源代码
│    ├─ [icons]                  # 应用程序图标
│    ├─ [src]                    # Tauri App 源代码，例如系统菜单，托盘，插件配置等
│    ├─ [target]                 # 构建的产物会被放入此文件夹中，target 目录的结构取决于是否使用 --target 标志为特定的平台构建
│    ├─ build.rs                 # Tauri 构建应用
│    ├─ Cargo.lock               # 包含了依赖的精确描述信息，类似于 yarn.lock 或 package-lock.json
│    ├─ Cargo.toml               # Tauri (Rust) 项目清单
│    └─ tauri.conf.json          # 自定义 Tauri 应用程序的配置文件，例如应用程序窗口尺寸，应用名称，权限等
├─ index.html                    # 项目主界面
├─ package.json                  # 前端项目清单
├─ tsconfig.json                 # typescript 配置文件
├─ vite.config.ts                # vite 配置文件
├─ yarn.lock                     # 前端依赖的精确描述信息
└─ ...                           # 其他

下面是一个符合 Markdown 格式的 Tauri 项目文件拓扑图（Tree 结构），用于清晰展示项目层级关系，适合插入到 README.md 或文档中：

# 📁 Tauri 项目文件拓扑图

tauri-app/ ├── node_modules/ # 前端依赖（自动生成） ├── dist/ # 前端构建产物（Vite build 输出） ├── src/ # 前端源代码 │ ├── App.vue / main.ts # 前端主入口 │ ├── components/ # 通用组件 │ └── assets/ # 静态资源 ├── src-tauri/ # Tauri 后端（Rust） │ ├── icons/ # 应用图标（.png/.icns/.ico） │ ├── src/ │ │ ├── main.rs # Rust 主入口 │ │ └── *.rs # 其他模块：窗口、托盘、插件等 │ ├── target/ # 构建产物（Rust 自动生成） │ ├── build.rs # 可选构建脚本 │ ├── Cargo.toml # Rust 项目配置（依赖、元信息） │ ├── Cargo.lock # Rust 依赖锁定文件 │ └── tauri.conf.json # Tauri 应用配置（窗口、权限等） ├── index.html # 前端页面入口（Vite 使用） ├── package.json # 前端依赖与脚本管理 ├── vite.config.ts # Vite 构建配置文件 ├── tsconfig.json # TypeScript 配置 ├── yarn.lock / package-lock.json # 依赖版本锁定 └── README.md # 项目说明文档

> 💡 建议使用 `tree -I 'node_modules|target|dist'` 命令自动生成简化版本，然后手动补充注释。

---

如你希望用图形方式（ASCII 拓扑图 + 图例说明）或 Mermaid 图表示，我也可以帮你转换。需要吗？

下面是对一个典型 Tauri 项目结构 的详细介绍，结合你提供的目录结构，我会逐层说明每个部分的作用与用途：

🧾 根目录（`tauri-app/`）

这是你的 Tauri 项目的根目录，既包含前端工程，也包含 Rust 后端（Tauri）部分。

📁 `node_modules/`

作用：存放前端依赖包（通过 yarn、npm 或 pnpm 安装）。
生成方式：执行 yarn install 或 npm install 后生成。
不应修改：通常被 .gitignore 忽略。

📁 `dist/`

作用：存放前端项目构建产物（如 HTML、JS、CSS），用于最终集成到 Tauri 应用中。
来源：由构建工具（如 Vite）产出，运行 yarn build 或 vite build 后生成。
用途：Tauri 打包时会读取这个目录来嵌入 Web UI。

📁 `src/`

作用：前端源代码目录。
内容：包含 Vue/React/Svelte 等前端框架的页面组件、逻辑、样式文件等。

示例结构（Vue 项目）：

src/
├── App.vue
├── main.ts
├── components/
└── assets/

📁 `src-tauri/`（🚀 核心目录）

这个目录是 Tauri 框架的核心区域，包含了所有与系统层交互的代码、配置与构建脚本。

📁 `src-tauri/icons/`

作用：存放应用程序图标（.png, .ico, .icns 等格式）。
用途：Tauri 在构建应用程序时会使用这些图标生成可执行文件图标。

📁 `src-tauri/src/`

作用：Rust 语言编写的 Tauri 主程序入口。
内容：
- main.rs：Tauri 应用的入口点，配置窗口、菜单、插件等。
- 可自定义多个模块，如 menu.rs, system.rs，组织后端逻辑。

示例：

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![my_command])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

📁 `src-tauri/target/`

作用：Rust 编译产物目录。
来源：运行 cargo build 或 cargo tauri build 后自动生成。
注意：默认会非常大，建议 .gitignore 掉。

📄 `src-tauri/build.rs`

作用：Tauri 构建过程的自定义钩子。
用途：
- 可用于在构建时生成绑定代码、处理资源文件、嵌入环境变量等。
- 可选项，不需要时可省略。

📄 `src-tauri/Cargo.toml`

作用：Rust 项目的依赖清单。
内容：
- 定义依赖的 crate，例如 tauri, serde, tokio 等。
- 指定编译设置，如版本、构建脚本。

示例片段：

[dependencies]
tauri = { version = "1.5", features = ["api-all"] }
serde = { version = "1.0", features = ["derive"] }

📄 `src-tauri/Cargo.lock`

作用：记录 Rust 项目中每个依赖及其精确版本。
类似：等价于 yarn.lock 或 package-lock.json。

📄 `src-tauri/tauri.conf.json`

作用：Tauri 应用的主配置文件。
配置内容：
- 窗口标题、尺寸、是否可调整
- 菜单配置
- 权限与安全沙箱设置
- 打包信息（icon、版本号等）

示例片段：

{
  "build": {
    "beforeBuildCommand": "yarn build",
    "distDir": "../dist"
  },
  "tauri": {
    "windows": [
      {
        "title": "我的Tauri应用",
        "width": 800,
        "height": 600
      }
    ]
  }
}

📄 其他前端相关文件

📄 `index.html`

作用：前端应用的入口 HTML 文件。
用途：Vite/Parcel/Webpack 等工具会将最终资源注入这里。

📄 `package.json`

作用：前端依赖与脚本管理文件。
包含：
- 项目信息（name, version）
- 依赖库（vue, react, typescript 等）
- 脚本命令（如 dev, build, tauri dev）

📄 `vite.config.ts`

作用：配置 Vite 打包工具的行为。
可设置内容：
- 路径别名、插件、环境变量、构建输出路径等。
- 通常配置 base, outDir, plugins, resolve.alias 等。

📄 `tsconfig.json`

作用：TypeScript 编译选项配置。
用途：
- 配置模块解析路径、类型检查严格程度等。
- 可设置路径别名支持 Tauri 调用模块。

📄 `yarn.lock` / `package-lock.json`

作用：锁定前端依赖的具体版本，确保团队成员构建一致性。

🔁 开发流程简要回顾

前端开发：

yarn dev           # 启动 Vite 开发服务

后端开发 + 前端集成运行：

yarn tauri dev     # 同时启动 Tauri 后端 + 前端调试

构建发布版本：

yarn build         # 构建前端
yarn tauri build   # 构建 Tauri 应用（包括可执行文件）

✅ 总结

Tauri 项目将 Rust 的系统能力与 现代前端框架（如 Vue、React）结合，形成了一个 安全、轻量、高性能 的桌面应用开发结构。

如果你用 Vue，React 或 Svelte 开发 Web 项目，并想要桌面端落地，Tauri 提供了比 Electron 更轻量的选择。

如需进一步了解 tauri.conf.json 配置项、Rust 后端 API 调用、invoke 机制 等，也可以继续问我。

创建​

🧾 根目录（tauri-app/）​

📁 node_modules/​

📁 dist/​

📁 src/​

📁 src-tauri/（🚀 核心目录）​

📁 src-tauri/icons/​

📁 src-tauri/src/​

📁 src-tauri/target/​

📄 src-tauri/build.rs​

📄 src-tauri/Cargo.toml​

📄 src-tauri/Cargo.lock​

📄 src-tauri/tauri.conf.json​

📄 其他前端相关文件​

📄 index.html​

📄 package.json​

📄 vite.config.ts​

📄 tsconfig.json​

📄 yarn.lock / package-lock.json​

🔁 开发流程简要回顾​

✅ 总结​

创建