Skip to content
Tauri 中文网
开发指南 参考手册 Nodejs.cn 旗下网站

创建项目

Tauri 之所以如此灵活，是因为它能够与几乎任何前端框架配合使用。我们创建了 create-tauri-app 实用程序来帮助你使用官方维护的框架模板之一创建一个新的 Tauri 项目。

¥One thing that makes Tauri so flexible is its ability to work with virtually any frontend framework. We’ve created the create-tauri-app utility to help you create a new Tauri project using one of the officially maintained framework templates.

create-tauri-app 目前包括 vanilla（没有框架的 HTML、CSS 和 JavaScript）、Vue.js、Svelte、React、SolidJS、Angular、Preact、Yew、Leptos 和 Sycamore 的模板。你还可以在 超棒的 Tauri 仓库 中查找或添加你自己的社区模板和框架。

¥create-tauri-app currently includes templates for vanilla (HTML, CSS and JavaScript without a framework), Vue.js, Svelte, React, SolidJS, Angular, Preact, Yew, Leptos, and Sycamore. You can also find or add your own community templates and frameworks in the Awesome Tauri repo.

或者，你可以使用 将 Tauri 添加到现有项目 快速将现有代码库转变为 Tauri 应用。

¥Alternatively, you can add Tauri to an existing project to quickly turn your existing codebase into a Tauri app.

使用 create-tauri-app

¥Using create-tauri-app

要开始使用 create-tauri-app，请在你想要设置项目的文件夹中运行以下命令之一。如果你不确定要使用哪个命令，我们建议在 Linux 和 macOS 上使用 Bash 命令，在 Windows 上使用 PowerShell 命令。

¥To get started using create-tauri-app run one of the below commands in the folder you’d like to setup your project. If you’re not sure which command to use we recommend the Bash command on Linux and macOS and the PowerShell command on Windows.

sh <(curl https://create.tauri.app/sh)

按照提示选择项目名称、前端语言、包管理器和前端框架以及前端框架选项（如果适用）。

¥Follow along with the prompts to choose your project name, frontend language, package manager, and frontend framework, and frontend framework options if applicable.

搭建新项目

¥Scaffold a new project

  1. Choose a name and a bundle identifier (unique-id for your app):

    ? Project name (tauri-app) ›
    ? Identifier (com.tauri-app.app) ›

  2. Select a flavor for your frontend. First the language:

    ? Choose which language to use for your frontend ›
    Rust  (cargo)
    TypeScript / JavaScript  (pnpm, yarn, npm, bun)
    .NET  (dotnet)

  3. Select a package manager (if there are multiple available):

    Options for TypeScript / JavaScript:

    ? Choose your package manager ›
    pnpm
    yarn
    npm
    bun

  4. Select a UI Template and flavor (if there are multiple available):

    Options for Rust:

    ? Choose your UI template ›
    Vanilla
    Yew
    Leptos
    Sycamore

    Options for TypeScript / JavaScript:

    ? Choose your UI template ›
    Vanilla
    Vue
    Svelte
    React
    Solid
    Angular
    Preact
    

    ? Choose your UI flavor ›
    TypeScript
    JavaScript

    Options for .NET:

    ? Choose your UI template ›
    Blazor  (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)

完成后，该实用程序会报告已创建模板并显示如何使用配置的包管理器运行它。如果它检测到你的系统上缺少依赖，它会打印软件包列表并提示如何安装它们。

¥Once completed, the utility reports that the template has been created and displays how to run it using the configured package manager. If it detects missing dependencies on your system, it prints a list of packages and prompts how to install them.

启动开发服务器

¥Start the development server

create-tauri-app 完成后，你可以导航到项目的文件夹，安装依赖，然后使用 Tauri CLI 启动开发服务器：

¥After create-tauri-app has complete you can navigate into your project’s folder, install dependencies, then use the Tauri CLI to start the development server:

cd tauri-app
npm install
npm run tauri dev

你现在将看到一个新窗口打开，其中你的应用正在运行。

¥You’ll now see a new window open with your app running.

恭喜！你已制作了自己的 Tauri 应用！🚀

¥Congratulations! You’ve made your Tauri app! 🚀

手动设置（Tauri CLI）

¥Manual Setup (Tauri CLI)

如果你已经有现有的前端或希望自己设置，则可以使用 Tauri CLI 单独初始化项目的后端。

¥If you already have an existing frontend or prefer to set it up yourself, you can use the Tauri CLI to initialize the backend for your project separately.

:::note 注意

以下示例假设你正在创建一个新项目。如果你已经初始化了应用的前端，则可以跳过第一步。

¥The following example assumes you are creating a new project. If you’ve already initialized the frontend of your application, you can skip the first step.

:::

  1. 为你的项目创建一个新目录并初始化前端。你可以使用纯 HTML、CSS 和 JavaScript，或你喜欢的任何框架，例如 Next.js、Nuxt、Svelte、Yew 或 Leptos。你只需要一种在浏览器中提供应用的方法。仅作为示例，你可以这样设置一个简单的 Vite 应用：

    ¥Create a new directory for your project and initialize the frontend. You can use plain HTML, CSS, and JavaScript, or any framework you prefer such as Next.js, Nuxt, Svelte, Yew, or Leptos. You just need a way of serving the app in your browser. Just as an example, this is how you would setup a simple Vite app:

    mkdir tauri-app
    cd tauri-app
    npm create vite@latest .

  2. 然后，使用你选择的包管理器安装 Tauri 的 CLI 工具。如果你使用 cargo 安装 Tauri CLI，则必须全局安装它。

    ¥Then, install Tauri’s CLI tool using your package manager of choice. If you are using cargo to install the Tauri CLI, you will have to install it globally.

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

  3. 确定前端开发服务器的 URL。这是 Tauri 将用来加载内容的 URL。例如，如果你使用的是 Vite，则默认 URL 为 http://localhost:5173。

    ¥Determine the URL of your frontend development server. This is the URL that Tauri will use to load your content. For example, if you are using Vite, the default URL is http://localhost:5173.

  4. 在你的项目目录中，初始化 Tauri：

    ¥In your project directory, initialize Tauri:

    npx tauri init

    运行命令后，它会显示一个提示，询问你不同的选项：

    ¥After running the command it will display a prompt asking you for different options:

    ✔ 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? http://localhost:5173
    ✔ What is your frontend dev command? pnpm run dev
    ✔ What is your frontend build command? pnpm run build

    这将在你的项目中创建一个 src-tauri 目录，其中包含必要的 Tauri 配置文件。

    ¥This will create a src-tauri directory in your project with the necessary Tauri configuration files.

  5. 通过运行开发服务器验证你的 Tauri 应用是否正常运行：

    ¥Verify your Tauri app is working by running the development server:

    npx tauri dev

    此命令将编译 Rust 代码并打开一个包含你的 Web 内容的窗口。

    ¥This command will compile the Rust code and open a window with your web content.

恭喜！你已使用 Tauri CLI 创建了一个新的 Tauri 项目！🚀

¥Congratulations! You’ve created a new Tauri project using the Tauri CLI! 🚀

后续步骤

¥Next Steps

Tauri v2.3 中文网 - 粤ICP备13048890号
Nodejs.cn 旗下网站