创建项目
Tauri 的一个使其非常灵活的特性是它能与几乎所有前端框架协作。我们创建了一个名为 create-tauri-app
的实用工具,帮助你使用官方维护的框架模板之一创建新的 Tauri 项目。
create-tauri-app
目前包括 vanilla(无框架的 HTML、CSS 和 JavaScript)、Vue.js、Svelte、React、SolidJS、Angular、Preact、Yew、Leptos 和 Sycamore 模板。你还可以在 Awesome Tauri 仓库 中找到或添加你自己的社区模板和框架。
或者,你可以 将 Tauri 添加到现有项目中,快速将现有的代码库转换为 Tauri 应用程序。
使用 create-tauri-app
要开始使用 create-tauri-app
,请在你想要设置项目的文件夹中运行以下命令之一。如果你不确定该使用哪个命令,我们建议在 Linux 和 macOS 上使用 Bash 命令,在 Windows 上使用 PowerShell 命令。
sh <(curl https://create.tauri.app/sh)
irm https://create.tauri.app/ps | iex
npm create tauri-app@latest
yarn create tauri-app
pnpm create tauri-app
deno run -A npm:create-tauri-app
bun create tauri-app
cargo install create-tauri-app --lockedcargo create-tauri-app
根据提示选择项目名称、前端语言、包管理器和前端框架,如果适用的话,还需要选择前端框架选项。
搭建新项目
-
选择名称和捆绑标识符(应用的唯一 ID)
? Project name (tauri-app) ›? Identifier (com.tauri-app.app) › -
选择前端风格。首先选择语言
? Choose which language to use for your frontend ›Rust (cargo)TypeScript / JavaScript (pnpm, yarn, npm, bun).NET (dotnet) -
选择包管理器(如果有多个可用)
TypeScript / JavaScript 选项
? Choose your package manager ›pnpmyarnnpmbun -
选择 UI 模板和风格(如果有多个可用)
Rust 选项
? Choose your UI template ›VanillaYewLeptosSycamoreTypeScript / JavaScript 选项
? Choose your UI template ›VanillaVueSvelteReactSolidAngularPreact? Choose your UI flavor ›TypeScriptJavaScript.NET 选项
? Choose your UI template ›Blazor (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)
完成后,工具会报告模板已创建,并显示如何使用配置的包管理器运行。如果它检测到系统中缺少依赖项,它会打印一份包列表,并提示如何安装它们。
启动开发服务器
完成 create-tauri-app
后,你可以导航到项目的文件夹中,安装依赖项,然后使用 Tauri CLI 启动开发服务器
cd tauri-appnpm installnpm run tauri dev
cd tauri-appyarn installyarn tauri dev
cd tauri-apppnpm installpnpm tauri dev
cd tauri-appdeno installdeno task tauri dev
cd tauri-appcargo tauri dev
你现在将看到一个新窗口打开,你的应用程序正在运行。
恭喜! 你已经制作了 Tauri 应用程序!🚀
手动设置 (Tauri CLI)
如果您已经有一个现有的前端或喜欢自己设置它,您可以使用 Tauri CLI 分别初始化您项目的后端。
-
为您的项目创建一个新的目录并初始化前端。您可以使用纯 HTML、CSS 和 JavaScript,或您喜欢的任何框架,例如 Next.js、Nuxt、Svelte、Yew 或 Leptos。您只需要一种在浏览器中提供服务应用的方式。例如,以下是如何设置简单的 Vite 应用
mkdir tauri-appcd tauri-appnpm create vite@latest .mkdir tauri-appcd tauri-appyarn create vite .mkdir tauri-appcd tauri-apppnpm create vite .mkdir tauri-appcd tauri-appdeno run -A npm:create-vite . -
然后,使用您的包管理器安装 Tauri 的 CLI 工具。如果您使用
cargo
安装 Tauri CLI,您将需要全局安装它。npm install -D @tauri-apps/cli@latestyarn add -D @tauri-apps/cli@latestpnpm add -D @tauri-apps/cli@latestdeno add -D npm:@tauri-apps/cli@latestcargo install tauri-cli --version "^2.0.0" --locked -
确定您前端开发服务器的 URL。这是 Tauri 将用于加载您内容的一个 URL。例如,如果您在 Vite 中,默认 URL 是
https://127.0.0.1:5173
。 -
在您的项目目录中初始化 Tauri
npx tauri inityarn tauri initpnpm tauri initdeno task tauri initcargo tauri init运行命令后,将显示一个提示要求您输入不同选项
✔ What is your app name? tauri-app✔ What should the window title be? tauri-app✔ Where are your web assets located? ..✔ What is the url of your dev server? https://127.0.0.1:5173✔ What is your frontend dev command? pnpm run dev✔ What is your frontend build command? pnpm run build这将创建一个包含必要的 Tauri 配置文件的
src-tauri
目录在您的项目中。 -
通过运行开发服务器来验证您的 Tauri 应用是否正常工作
npx tauri devyarn tauri devpnpm tauri devdeno task tauri devcargo tauri dev此命令将编译 Rust 代码并打开一个包含您的 Web 内容的窗口。
恭喜! 您已经使用 Tauri CLI 创建了一个新的 Tauri 项目!🚀
下一步操作
© 2025 Tauri 贡献者。CC-BY / MIT