diff --git a/src/content/docs/zh-cn/start/create-project.mdx b/src/content/docs/zh-cn/start/create-project.mdx index 063be0c88c..f36fd0de01 100644 --- a/src/content/docs/zh-cn/start/create-project.mdx +++ b/src/content/docs/zh-cn/start/create-project.mdx @@ -8,37 +8,107 @@ import { Card, Steps } from '@astrojs/starlight/components'; import Cta from '@fragments/cta.mdx'; -Tauri 如此灵活的一点在于它能够与几乎任何前端框架配合工作。 -我们创建了 [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app) 工具，帮助您使用官方维护的框架模板创建新的 Tauri 项目。 +Tauri 之所以如此灵活，原因之一在于它几乎可以与任何前端框架协同工作。 +我们创建了 [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app) 工具，帮助你使用官方维护的框架模板创建一个新的 Tauri 项目。 -`create-tauri-app` 目前包含以下模板：无框架（纯HTML、CSS and JavaScript）、[Vue.js](https://vuejs.org)、[Svelte](https://svelte.dev)、[React](https://reactjs.org/)、[SolidJS](https://www.solidjs.com/)、[Angular](https://angular.io/)、[Preact](https://preactjs.com/)、[Yew](https://yew.rs/)、[Leptos](https://github.com/leptos-rs/leptos) 和 [Sycamore](https://sycamore-rs.netlify.app/)。您还可以在 [Awesome Tauri 仓库](https://github.com/tauri-apps/awesome-tauri)中找到或添加您自己的社区模板和框架。 +`create-tauri-app` 目前包含以下模板：原生（即不使用框架的HTML、CSS 和 JavaScript）、[Vue.js](https://vuejs.org)、[Svelte](https://svelte.dev)、[React](https://reactjs.org/)、[SolidJS](https://www.solidjs.com/)、[Angular](https://angular.io/)、[Preact](https://preactjs.com/)、[Yew](https://yew.rs/)、[Leptos](https://github.com/leptos-rs/leptos) 和 [Sycamore](https://sycamore-rs.netlify.app/)。你还可以在 [Awesome Tauri 仓库](https://github.com/tauri-apps/awesome-tauri)中查找或添加由社区提供的其他模板和框架。 {/* TODO: redirect to integrate to existing front-end project specific docs */} -或者，您可以 [将 Tauri 添加到现有的项目中](#使用-tauri-cli-手动创建) 以便快速地将现有代码库转换为 Tauri 应用。 +或者，你也可以 [将 Tauri 添加到现有的项目中](#手动设置-tauri-cli) 快速将你现有的代码库转换为 Tauri 应用。 ## 使用 `create-tauri-app` -要开始使用 `create-tauri-app`，请在您希望设置项目的文件夹中运行以下其中一个命令。如果您不确定要使用哪个命令，我们建议在 Linux 和 macOS 上使用 Bash 命令，在 Windows 上使用 PowerShell 命令。 +要开始使用 `create-tauri-app`，请在你希望设置项目的文件夹中运行以下任一命令。如果你不确定该使用哪个命令，我们建议在 Linux 和 macOS 上使用 Bash 命令，在 Windows 上使用 PowerShell 命令。 -请跟随提示选择您的项目名称、前端语言、包管理器以及前端框架，还有一些前端框架选项（如果有的话）。 +按照提示操作，选择你的项目名称、前端语言、包管理器、前端框架，以及前端框架的相关选项（如适用）。 :::tip[不确定怎么选择？] {/* TODO: redirect to integrate to existing front-end project specific docs */} 我们建议从基础模板开始（使用HTML、CSS和JavaScript，不使用前端框架），以便快速入门。随后您可以随时[引入前端框架](/zh-cn/start/create-project/)。 -- 选择您的前端语言：`TypeScript / JavaScript` -- 选择您的包管理器：`pnpm` -- 选择您的UI模板：`Vanilla` -- 选择您的UI风格：`TypeScript` +- 选择你前端使用的语言：`TypeScript / JavaScript` +- 选择你的包管理器：`pnpm` +- 选择你的UI模板：`Vanilla` +- 选择你的UI风格：`TypeScript` ::: +#### 搭建一个新项目 + + + +1. 选择一个名称和一个包标识符（你应用的唯一标识符）： + ``` + ? Project name (tauri-app) › + ? Identifier (com.tauri-app.app) › + ``` +2. 为你的前端选择一种风格. 首先是语言 + ``` + ? Choose which language to use for your frontend › + Rust (cargo) + TypeScript / JavaScript (pnpm, yarn, npm, bun) + .NET (dotnet) + ``` +3. 选择一个包管理器 (如果有多个可用的): + + **TypeScript / JavaScript** 的选项: + + ``` + ? Choose your package manager › + pnpm + yarn + npm + bun + ``` + +4. 选择一个UI模板和风格 (如果有多个可用的): + + **Rust** 的选项: + + ``` + ? Choose your UI template › + Vanilla + Yew + Leptos + Sycamore + ``` + + **TypeScript / JavaScript** 的选项: + + ``` + ? Choose your UI template › + Vanilla + Vue + Svelte + React + Solid + Angular + Preact + + ? Choose your UI flavor › + TypeScript + JavaScript + ``` + + **.NET** 的选项: + + ``` + ? Choose your UI template › + Blazor (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/) + ``` + + + +一旦完成, 该实用程序会报告模板已创建，并显示如何使用配置的包管理器运行它。如果它检测到你的系统上缺少依赖项，它会打印出包列表，并提示如何安装它。 + {/* TODO: Can CTA offer to install the deps? */} -在 `create-tauri-app` 创建完项目后，您可以进入项目文件夹，安装依赖，然后使用 [Tauri CLI](/zh-cn/reference/cli/) 启动开发服务器： +#### 启动开发服务器 + +在 `create-tauri-app` 执行完成后，你可以进入项目文件夹，安装依赖，然后使用 [Tauri CLI](/zh-cn/reference/cli/) 启动开发服务器： import CommandTabs from '@components/CommandTabs.astro'; @@ -52,25 +122,32 @@ import CommandTabs from '@components/CommandTabs.astro'; pnpm="cd tauri-app pnpm install pnpm tauri dev" + deno="cd tauri-app + deno install + deno task tauri dev" + bun="cd tauri-app + bun install + bun tauri dev + " cargo="cd tauri-app cargo tauri dev" /> -您将会看到一个新的窗口被打开，该窗口正在运行您的应用。 +现在你会看到一个新窗口打开，其中正在运行你的应用。 -**恭喜您！** 您已经创建了您自己的 Tauri 应用！🚀 +**恭喜！** 你已经制作出了你的 Tauri 应用！🚀 -## 使用 Tauri CLI 手动创建 +## 手动设置 (Tauri CLI) -如果您已经有现有的前端项目或者更愿意自行设置，您可以使用 Tauri CLI 单独初始化您项目的后端部分。 +如果你已经有一个现有的前端项目，或者更倾向于自行设置，你可以使用 Tauri CLI 单独为你的项目初始化后端部分。 :::note -以下示例假设您正在创建一个新项目。如果您已经初始化了应用程序的前端部分，您可以跳过第一步。 +以下示例假设你正在创建一个新项目。如果你已经初始化了应用程序的前端部分，可以跳过第一步。 ::: - 1. 为您的项目创建一个新的目录，并初始化前端部分。您可以使用纯 HTML、CSS 和 JavaScript，或者任何您喜欢的框架，比如 Next.js、Nuxt、Svelte、Yew 或 Leptos。您只需要一种方式在浏览器中提供应用程序。下面是一个设置简单的 Vite 应用程序的示例： + 1. 为你的项目创建一个新目录并初始化前端。你可以使用纯 HTML、CSS 和 JavaScript，也可以使用任何你喜欢的框架，例如 Next.js、Nuxt、Svelte、Yew 或 Leptos。你只需要有一种能在浏览器中运行该应用的方式即可。举个例子，以下是设置一个简单 Vite 应用的方法： - 2. 接着，使用您选择的包管理器安装 Tauri 的 CLI 工具。如果您使用 `cargo` 来安装 Tauri CLI，您需要全局安装它。 + 2. 然后，使用你选择的包管理器安装 Tauri 的 CLI 工具。如果你使用 `cargo` 来安装 Tauri CLI，则需要将其全局安装。 - 3. 确定您的前端开发服务器的 URL。这个 URL 是 Tauri 用来加载您的内容的地址。例如，如果您正在使用 Vite，那么默认的 URL 是 `http://localhost:5173` 。 + 3. 确定你的前端开发服务器的 URL。这是 Tauri 用来加载你应用内容的地址。例如，如果你使用的是 Vite，默认 URL 是 `http://localhost:5173` 。 - 4. 在您的项目目录下初始化 Tauri： + 4. 在你的项目目录中，初始化 Tauri： - 在执行这个指令时会显示一个提示框，提示您为不同的选项输入不同的值： + 运行该命令后，会显示一个提示，要求你选择不同的选项： ```sh frame=none ✔ What is your app name? tauri-app @@ -115,28 +202,29 @@ import CommandTabs from '@components/CommandTabs.astro'; ✔ What is your frontend build command? pnpm run build ``` - 这将会在您的项目中创建一个 `src-tauri` 目录，其中包含了重要的 Tauri 配置文件。 + 这将在你的项目中创建一个 `src-tauri` 目录，其中包含 Tauri 所需的配置文件。 - 5. 通过运行开发服务器来验证您的 Tauri 应用是否正常工作： + 5. 通过运行开发服务器来验证你的 Tauri 应用是否正常工作： - 这个指令将会编译 Rust 代码，并打开一个窗口展示您的网页内容。 + 该命令将编译 Rust 代码，并打开一个窗口来显示你的网页内容。 -**恭喜您！** 您已经通过 Tauri CLI 创建了一个新的 Tauri 项目！🚀 +**恭喜！** 你已经使用 Tauri CLI 创建了一个新的 Tauri 项目！🚀 ## 下一步 -{/* TODO: Some documents need to be translated. */} - -- [添加和配置前端框架](/zh-cn/start/frontend/) -- [Tauri 命令行(CLI) 参考](/zh-cn/reference/cli/) -- [了解怎样构建您的 Tauri 应用](/zh-cn/develop/) -- [探索扩展 Tauri 的附加功能](/zh-cn/plugin/) +- [了解项目结构以及每个文件的作用](/zh-cn/start/project-structure/) +- [添加并配置前端框架](/zh-cn/start/frontend/) +- [Tauri 命令行界面（CLI）参考文档](/zh-cn/reference/cli/) +- [学习如何开发你的 Tauri 应用](/zh-cn/develop/) +- [探索更多功能以扩展 Tauri](/zh-cn/plugin/) diff --git a/src/content/docs/zh-cn/start/index.mdx b/src/content/docs/zh-cn/start/index.mdx index 7bbf208dc6..7e062e30c6 100644 --- a/src/content/docs/zh-cn/start/index.mdx +++ b/src/content/docs/zh-cn/start/index.mdx @@ -3,46 +3,48 @@ title: Tauri 是什么？ i18nReady: true --- -Tauri 是一个构建适用于所有主流桌面和移动平台的轻快二进制文件的框架。开发者们可以集成任何用于创建用户界面的可以被编译成 HTML、JavaScript 和 CSS 的前端框架，同时可以在必要时使用 Rust、Swift 和 Kotlin 等语言编写后端逻辑。 +Tauri 是一个用于构建小巧、快速的二进制程序的框架，支持所有主流桌面和移动平台。开发者可以集成任何能编译为 HTML、JavaScript 和 CSS 的前端框架来构建用户界面，并在需要时利用 Rust、Swift 和 Kotlin 等语言处理后端逻辑。 -你可以使用下面的任意一个命令以利用 [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app) 创建一个新的项目。请务必参考[前置要求文档](/zh-cn/start/prerequisites/)安装所有 Tauri 必须的依赖，并阅读[前端配置指南](/zh-cn/start/frontend/)了解推荐的前端配置方案。 +通过以下任一命令，使用 [`create-tauri-app`](https://github.com/tauri-apps/create-tauri-app) 开始构建你的应用。请务必先阅读[前置要求](/zh-cn/start/prerequisites/)，以安装 Tauri 所需的所有依赖项。如需更详细的步骤说明，请参阅[创建项目](/zh-cn/start/create-project/#使用-create-tauri-app)。 import Cta from '../../_fragments/cta.mdx'; -在你成功创建了你的第一个应用后，你可以在[功能及秘诀列表](/zh-cn/plugin/)探索 Tauri 的不同功能及秘诀。 +创建你的第一个应用后，请查看 [项目结构](/zh-cn/start/project-structure/)，以了解每个文件的作用。 -## 为什么选用 Tauri？ +或者，浏览示例中的项目配置和功能 ([tauri](https://github.com/tauri-apps/tauri/tree/dev/examples) | [plugins-workspace](https://github.com/tauri-apps/plugins-workspace/tree/v2/examples/api)) -对于开发者而言，Tauri 有三个主要优势： +## 为什么选择 Tauri？ -- 构建应用所需的可靠基础 -- 使用系统原生 webview（网页视图）带来的更小打包体积 -- 使用任何前端技术和多种语言绑定带来的灵活性 +Tauri 为开发者提供了三大主要优势，可用于构建应用程序： -阅读 [Tauri 1.0 博客文章](/zh-cn/blog/tauri-1-0/)深入了解 Tauri 哲学思想。 +- 为构建应用提供安全的基础 +- 利用系统原生 WebView，实现更小的打包体积 +- 灵活性强，开发者可使用任意前端框架，并支持多种语言的绑定 -### 可靠的基础 +在 [Tauri 1.0 博客文章](/zh-cn/blog/tauri-1-0/)中深入了解 Tauri 的设计理念。 -由于 Tauri 是使用 Rust 构建的，它可以利用 Rust 提供的内存、线程和类型安全方面的优势。而使用 Tauri 开发的应用也可以从中受益，甚至无需由 Rust 专家开发这些应用。 +### 安全的基础 -Tauri 的每一个主要和次要版本都会接受安全审计。这一审计不光涵盖了 Tauri 组织范围内的代码，还包括了 Tauri 所使用的上游依赖。当然，这些举措不能消除所有的风险，但它们能够为开发者提供一个坚实的基础。 +由于基于 Rust 构建，Tauri 能够充分利用 Rust 提供的内存安全、线程安全和类型安全等特性。即使开发者并非 Rust 专家，使用 Tauri 构建的应用也能自动获得这些优势。 -阅读 [Tauri 安全策略](https://github.com/tauri-apps/tauri/security/policy)和 [Tauri 1.0 审计报告](https://github.com/tauri-apps/tauri/blob/dev/audits/Radically_Open_Security-v1-report.pdf)了解更多信息。 +Tauri 还会对每个主要版本和次要版本进行安全审计。审计范围不仅涵盖 Tauri 组织自身的代码，还包括 Tauri 所依赖的上游依赖项。当然，这并不能消除所有风险，但它为开发者提供了一个坚实的安全基础，便于在其之上构建应用。 -### 更小的体积 +阅读 [Tauri 安全策略](https://github.com/tauri-apps/tauri/security/policy)和 [Tauri 2.0 审计报告](https://github.com/tauri-apps/tauri/blob/dev/audits/Radically_Open_Security-v2-report.pdf)了解更多信息。 -Tauri 利用了已经存在于每一个用户系统的 webview。Tauri 应用中只包含了该应用专属的代码和资源文件，不需要在每个应用中都打包一个浏览器引擎，这意味着一个最小化的 Tauri 应用体积可能小于 600KB。 +### 更小的应用体积 -在[应用体积概念](/zh-cn/concept/size/)中你可以深入学习如何创建一个最优化的应用。 +Tauri 应用利用了用户系统中已有的 WebView。Tauri 应用仅包含该应用特有的代码和资源，无需为每个应用打包一个完整的浏览器引擎。这意味着一个最简的 Tauri 应用体积可小于 600KB。 + +在[应用体积概念](/zh-cn/concept/size/)中了解更多关于创建优化应用的信息。 ### 灵活的架构 -由于 Tauri 使用了 web 技术，这也意味着几乎所有的前端框架都与 Tauri 兼容。 +由于 Tauri 使用 Web 技术，因此几乎任何前端框架都能与 Tauri 兼容。[前端配置指南](/zh-cn/start/frontend/) 提供了主流前端框架的常用配置说明。 -开发者可以在 JavaScript 中使用 `invoke` 函数实现 JavaScript 与 Rust 绑定，而 Swift 和 Kotlin 绑定则是作为 [Tauri 插件](/zh-cn/develop/plugins/) +开发者可通过 JavaScript 中的 `invoke` 函数实现与 Rust 的绑定，同时[Tauri 插件](/zh-cn/develop/plugins/) 也提供了 Swift 和 Kotlin 的绑定支持。 -[TAO](https://github.com/tauri-apps/tao) 被用于管理 Tauri 窗口创建，[WRY](https://github.com/tauri-apps/wry) 则被用于管理 webview 渲染。这些库由 Tauri 维护，并且如果需要 Tauri 没有暴露的更深入的系统集成时可以直接使用。 +[TAO](https://github.com/tauri-apps/tao) 负责 Tauri 的窗口创建，[WRY](https://github.com/tauri-apps/wry) 负责 WebView 渲染。这两个库均由 Tauri 团队维护，如果需要在 Tauri 暴露的功能之外实现更深层次的系统集成，也可以直接使用它们。 -除此之外，Tauri 还维护了一些插件拓展 Tauri 核心暴露的系统能力。你可以在[功能及秘诀章节](/zh-cn/plugin/)同时找到官方和社区提供的插件。 +此外，Tauri 还维护了一系列插件，用于扩展核心功能。你可以在[插件板块](/zh-cn/plugin/)中找到这些官方插件以及社区提供的插件。