2.2 项目初始化方式 - 人人都会AI编程

Tauri 的项目初始化非常灵活，既可以快速创建一个带完整模板的新项目，也可以将 Tauri 逐步集成到已有的前端工程里。下面介绍两种最常用的方式，你可以根据实际情况选择。

方式一：使用脚手架一键创建（推荐入门）

Tauri 官方提供了 create-tauri-app 脚手架，它会引导你选择前端框架、包管理工具，并自动生成一个可以直接运行的基础项目。

步骤：

运行脚手架命令

在终端中执行（任选一种包管理工具）：

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

跟随交互式问答

脚手架会依次询问：

项目名称（例如 my-tauri-app）
前端框架（React、Vue、Svelte、Vanilla 等）
包管理工具（npm、yarn、pnpm）
是否启用 TypeScript（建议启用）

完成后，它会自动调用对应前端框架的脚手架（如 Vite）生成前端代码，并安装必要的 Tauri 依赖。

   cd my-tauri-app
   npm install   # 或 yarn/pnpm install
   npm run tauri dev

首次运行 tauri dev 时，Tauri 会自动下载并配置系统对应的 WebView 依赖（例如 Windows 的 WebView2）。之后便会弹出一个原生窗口，显示你的前端页面。

真实体验：整个过程通常在 1～2 分钟内完成，你会得到一个含 src-tauri 目录的完整项目结构，前端部分和你平时用 Vite 创建的项目几乎完全一样。

方式二：在现有前端项目中集成 Tauri

如果你已经有一个用 Vite、Webpack 或 CRA 构建的前端应用，只想给它“套上”原生壳，可以手动添加 Tauri。

步骤：

安装 Tauri CLI 和 API 包

在项目根目录执行：

   npm install -D @tauri-apps/cli
   npm install @tauri-apps/api

初始化 Tauri

   npx tauri init

它会询问应用名称、窗口标题、前端资源路径（通常回答 ../dist 或你的构建输出目录）和开发服务器地址（如 http://localhost:5173）。完成后会在项目根生成 src-tauri 目录。

调整配置（可选）

src-tauri/tauri.conf.json 中的 build.devPath 和 build.distDir 必须指向正确的前端路径。如果前端框架不是 Vite，对着你的构建输出目录修改即可。

启动开发模式

先启动前端开发服务器（如 npm run dev），再开另一个终端运行：

   npx tauri dev

同样，Tauri 会拉起一个原生窗口，内容就是你的前端页面。

注意：如果遇到 WebView2 缺失（Windows 7 或某些精简系统），tauri dev 会提示你安装，你可以按提示下载安装或选择使用外部 WebView2 运行时。

项目结构速览

初始化完成后，你会看到类似这样的目录：

my-tauri-app/
├── src/                 # 前端代码（React/Vue等）
├── src-tauri/           # Tauri Rust 后端
│   ├── src/
│   │   └── main.rs      # Rust 入口
│   ├── Cargo.toml       # Rust 依赖
│   └── tauri.conf.json  # Tauri 配置
├── package.json
└── vite.config.ts

前端部分和你平时开发完全一样，后端逻辑写在 main.rs 里（或拆分成模块），配置文件则控制窗口属性、权限白名单等。

总结

全新项目：用 npm create tauri-app@latest，一站式生成。
已有前端项目：装 @tauri-apps/cli 和 @tauri-apps/api，再 tauri init。
两种方式的共同点是：前端保持独立，Tauri 只是通过 src-tauri 目录提供原生壳和 API。

无论哪种方式，你都能在几分钟内看到一个由系统 WebView 渲染的原生窗口，开始真正的桌面应用开发。