跳至主要内容

SvelteKit

本指南将引导您使用 SvelteKit 前端框架创建您的第一个 Tauri 应用。

信息

在继续之前，请确保您已完成 前提条件 以拥有一个可工作的开发环境。

Tauri 是一个用于使用任何前端框架和 Rust 核心构建桌面应用程序的框架。每个应用程序包含两个部分：

  1. 创建窗口并将原生功能暴露给这些窗口的 Rust 二进制文件
  2. 您选择的在窗口内生成用户界面的前端

接下来，我们将首先搭建前端，设置 Rust 项目，最后向您展示如何在两者之间进行通信。

以下是我们将要构建的内容预览

Application Preview

创建前端​

SvelteKit 是一个主要用于服务器端渲染 (SSR) 的 Svelte 前端。为了使 SvelteKit 与 Tauri 协同工作，我们将禁用 SSR 并使用 @sveltejs/adapter-static 来创建一个基于静态站点生成 (SSG) 的前端。

SvelteKit 带有一个类似于 create-tauri-app 的脚手架工具，可以快速设置一个具有许多自定义选项的新项目。在本指南中，我们将选择 TypeScript 模板，并启用 ESLint 和 Prettier。

npm create svelte@latest

  1. 项目名称
    这将是您的 JavaScript 项目的名称。对应于此实用程序将创建的文件夹的名称，但对您的应用程序没有其他影响。您可以在此处使用任何名称。

  2. 应用程序模板
    我们将选择 `Skeleton project` 用于一个基本的模板。如果您想尝试更完整的 SvelteKit 示例，您可以选择 `SvelteKit demo app`。

  3. 类型检查
    您是否希望在项目中通过 JSDoc 或 TypeScript 进行类型检查。在本指南中，我们假设您选择 TypeScript。

  4. 代码检查和格式化
    您是否希望使用 ESLint 进行代码检查和 Prettier 进行代码格式化来启动您的项目。本指南中不会再提及此内容，但我们建议启用这两个选项。

  5. 浏览器测试
    SvelteKit 提供了内置的 Playwright 浏览器测试支持。由于 Tauri API 在 Playwright 中不起作用，我们建议不要添加它。请查看我们的 WebDriver 文档，了解使用 Selenium 或 WebdriverIO 而不是 Playwright 的替代方案。

SSG 模式下的 SvelteKit​

首先，我们需要安装 @sveltejs/adapter-static

npm install --save-dev @sveltejs/adapter-static

然后更新 `svelte.config.js` 文件中的 `adapter` 导入

svelte.config.js
import adapter from '@sveltejs/adapter-static' // This was changed from adapter-auto
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.net.cn/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter(),
  },
}

export default config

最后，我们需要禁用 SSR 并通过添加一个根 `+layout.ts` 文件（如果您不使用 TypeScript，则为 `+layout.js`）并包含以下内容来启用预渲染：

src/routes/+layout.ts
export const prerender = true
export const ssr = false

请注意，static-adapter 不需要您禁用整个应用程序的 SSR，但它可以使您能够使用依赖于全局 `window` 对象（如 Tauri 的 API）的 API，而无需 客户端检查。

此外，如果您更喜欢单页应用程序 (SPA) 模式而不是 SSG，您可以根据 adapter 文档 更改 adapter 配置和 `+layout.ts`。

创建 Rust 项目​

每个 Tauri 应用程序的核心都是一个 Rust 二进制文件，它通过名为 `tauri` 的 Rust crate 管理窗口、webview 和对操作系统的调用。这个项目由 Cargo 管理，Cargo 是 Rust 的官方包管理器和通用构建工具。

我们的 Tauri CLI 在后台使用 Cargo，因此您很少需要直接与它交互。Cargo 还有许多通过我们的 CLI 未公开的有用功能，例如测试、代码检查和格式化，因此请参阅其 官方文档 以了解更多信息。

安装 Tauri CLI

如果您尚未安装 Tauri CLI，您可以使用以下命令之一进行安装。不确定使用哪个？请查看 常见问题解答条目。

npm install --save-dev @tauri-apps/cli@">1.0.0"
为了使 npm 正确检测到 Tauri，您需要将其添加到 `package.json` 文件的 "scripts" 部分
package.json
"scripts": {
  "tauri": "tauri"
}

要搭建一个预配置为使用 Tauri 的最小 Rust 项目，请打开终端并运行以下命令：

npm run tauri init

它将引导您完成一系列问题：

  1. 您的应用程序名称是什么？
    这将是您的最终包的名称，也是操作系统将您的应用程序称为什么。您可以在此处使用任何名称。

  2. 窗口标题应该是什么？
    这将是默认主窗口的标题。您可以在此处使用任何标题。

  3. 您的 Web 资源（HTML/CSS/JS）相对于 将要创建的 `/src-tauri/tauri.conf.json` 文件的位置？
    这是 Tauri 在构建 **生产环境** 时将从中加载前端资源的路径。
    为此值使用 `../build`。

  4. 您的开发服务器的 URL 是什么？
    这可以是 Tauri 在 开发期间将加载的 URL 或文件路径。.
    为此值使用 `https://127.0.0.1:5173`。

  5. 您的前端开发命令是什么？
    这是用于启动前端开发服务器的命令。
    使用 `npm run dev`（确保将其调整为使用您选择的包管理器）。

  6. 您的前端构建命令是什么？
    这是构建前端文件的命令。
    使用 `npm run build`（确保将其调整为使用您选择的包管理器）。
信息

如果您熟悉 Rust，您会注意到 `tauri init` 看起来和工作方式与 `cargo init` 非常相似。如果您更喜欢完全手动设置，您可以只使用 `cargo init` 并添加必要的 Tauri 依赖项。

`tauri init` 命令会生成一个名为 `src-tauri` 的文件夹。对于 Tauri 应用程序来说，将所有核心相关文件放在此文件夹中是一种约定。让我们快速浏览一下此文件夹的内容：

  • Cargo.toml
    Cargo 的清单文件。您可以声明您的应用程序依赖的 Rust crate、关于您的应用程序的元数据等等。有关完整参考，请参见 Cargo 的清单格式。

  • tauri.conf.json
    此文件允许您配置和自定义 Tauri 应用程序的各个方面，从应用程序名称到允许的 API 列表。有关支持选项的完整列表以及每个选项的详细说明，请参见 Tauri 的 API 配置。

  • src/main.rs
    这是您的 Rust 程序的入口点，也是我们引导到 Tauri 的地方。您将在其中找到两个部分：

    src/main.rs
     #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

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

    以 cfg! 宏 开头的行只有一个目的：它禁用了在 Windows 上运行捆绑应用程序时通常会弹出的命令提示符窗口。如果您在 Windows 上，请尝试注释掉它并查看会发生什么。

    `main` 函数是入口点，也是程序运行时调用的第一个函数。

  • 图标
    您可能想要一个漂亮的应用程序图标！为了让您快速上手，我们包含了一组默认图标。在发布应用程序之前，您应该将这些图标替换掉。了解 Tauri 的 图标功能指南 中各种图标格式的更多信息。

现在我们已经搭建了前端并初始化了 Rust 项目，创建的 `tauri.conf.json` 文件应该如下所示：

src-tauri/tauri.conf.json
{
  "build": {
    // This command will execute when you run `tauri build`.
    "beforeBuildCommand": "npm run build",
    // This command will execute when you run `tauri dev`
    "beforeDevCommand": "npm run dev",
    "devPath": "https://127.0.0.1:5173",
    "distDir": "../build"
  },

就是这样！现在您可以在终端中运行以下命令来启动应用程序的开发版本：

npm run tauri dev

Application Window

调用命令​

Tauri 允许您使用原生功能增强您的前端。我们称这些为 命令，本质上是您可以从前端 JavaScript 调用的 Rust 函数。这使您可以以更高效的 Rust 代码处理繁重的处理或对操作系统的调用。

让我们做一个简单的例子：

src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

命令就像任何常规 Rust 函数一样，除了添加了 `#[tauri::command]` 属性宏，该宏允许您的函数与 JavaScript 上下文通信。

最后，我们还需要告诉 Tauri 我们新创建的命令，以便它能够相应地路由调用。这可以通过组合使用 `.invoke_handler()` 函数和下面看到的 `generate_handler![]` 宏来完成。

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

现在您可以从前端调用您的命令了！

为了调用我们新创建的命令，我们将使用 @tauri-apps/api JavaScript 库。它通过便捷的 JavaScript 抽象提供了对核心功能（例如窗口、文件系统等）的访问。您可以使用您喜欢的 JavaScript 包管理器来安装它。

npm install @tauri-apps/api@">1.0.0"

安装库后，我们现在可以创建一个新的 Svelte 组件。我们将其创建在 `src/lib/Greet.svelte` 中。

src/lib/Greet.svelte
<script>
  import { invoke } from '@tauri-apps/api/tauri'

  let name = ''
  let greetMsg = ''

  async function greet() {
    greetMsg = await invoke('greet', { name })
  }
</script>

<div>
  <input id="greet-input" placeholder="Enter a name..." bind:value="{name}" />
  <button on:click="{greet}">Greet</button>
  <p>{greetMsg}</p>
</div>

现在您可以将此组件添加到 `src/routes/+page.svelte` 中。

src/routes/+page.svelte
<script>
  import Greet from '../lib/Greet.svelte'
</script>

<h1>Welcome to SvelteKit</h1>
<Greet />

现在您可以使用 `npm run tauri dev` 运行它并查看结果。

Application Preview

提示

如果您想了解更多关于 Rust 和 JavaScript 之间通信的信息，请阅读 Tauri 的 进程间通信 指南。