创建你的第一个 Dioxus app

创建 app

你可以使用下面的命令来创建一个新的 Dioxus 项目, 并根据需要完成提示的配置.

bash 复制代码

dx new hot_dog

您需要选择一个模板来开始使用。

Bare-bones ：一个非常简单的设置，仅包含 main.rs 文件和一个 *assets *文件夹。
Jumpstart：一个带有组件、视图和建议结构的框架应用。
Workspace：一个完整的 Cargo 工作区设置，每个平台都有不同的仓库。

我们将使用基础模板来创建 HotDog 应用。我们的应用不会太复杂，可以放在一个文件中。

当被问及是否要创建一个全栈网站时，请选择"false"。
对于路由器，请选择"false"，尽管我们最终会将路由器添加到应用中。
选择"false"以禁用 TailwindCSS。若需使用 TailwindCSS，请务必阅读 TailwindCSS 指南。
选择"Web"作为默认平台。

📣 创建新 Dioxus 应用可以不使用 dx new ！因为 Dioxus 应用是 Rust 项目，可以通过 cargo 等工具进行构建。

运行 Dioxus 项目

创建项目以后, 你可以使用下面的命令编译运行.

bash 复制代码

cd hot_dog
dx serve

这将启动 cargo 构建并启动一个Web服务器来托管您的应用程序。如果您访问服务地址（在本例中为*http://127.0.0.1:8080*），则浏览器中将显示加载界面：

加载应用后，你会看到 Dioxus 的模版界面:

那么,🎉恭喜你, 有了第一个 Dioxus 项目

项目结构

打开项目代码, 你可以看到下面的结构

bash 复制代码

├── Cargo.lock
├── Cargo.toml
├── Dioxus.toml
├── README.md
├── assets
│   ├── favicon.ico
│   ├── header.svg
│   └── main.css
└── src
    └── main.rs

所有 Rust 应用程序都由一个根 Cargo.toml 文件和位于 src 文件夹中的 main.rs 文件组成。我们的 CLI dx 工具已预先为这些文件填充了 dioxus 依赖项和一些启动代码，以便我们快速开始构建。

Dioxus 中的资源可以放置在项目中的任何位置，但我们建议将其保留在 assets 文件夹中。

Cargo.toml

Cargo.toml 文件定义了应用程序的依赖项并指定编译器设置。所有 Rust 应用程序均需编译：我们通过执行 Rust 工具 cargo，将所有 .rs 文件整合并生成最终的二进制可执行文件（如 .exe 文件），从而运行应用程序。

所有 Dioxus 应用程序均会将 dioxus 作为依赖项包含在内：

bash 复制代码

[dependencies]
dioxus = { version = "0.6.0" }

预构建的 Dioxus 模板会为您的应用初始化不同的 Cargo 功能。dx 将使用这些模板来决定在您指定 --platform 功能时启用哪些 Cargo 功能。例如，如果您使用 dx serve --platform desktop 来为桌面构建您的应用，dx 将调用 cargo build --no-default-features --features desktop。

bash 复制代码

[features]
default = ["web"]
web = ["dioxus/web"]
desktop = ["dioxus/desktop"]
mobile = ["dioxus/mobile"]

Dioxus 从 0.6 版本开始, 为你的程序单独配置了 Cargo profiles. 这些配置文件允许您自定义每个目标平台的优化级别。Dioxus 还利用这些平台作为隔离构建的机制。

Dioxus.toml

*Dioxus.toml *文件包含 Dioxus 特定的配置，用于打包和部署等阶段。在 Dioxus 0.5 之前，我们使用 Dioxus.toml 来指定资源包含和热重载监视路径，但从 Dioxus 0.6 开始，这些字段已被废弃，并被 asset!() 和 .gitignore 等标准取代。

目前我们无需为应用配置 Dioxus.toml 文件。

资源文件夹

要在 Dioxus 应用中包含资源，需使用我们在"样式与资源 "章节中将要介绍的 asset!() 宏。您可以从应用文件树的任意位置包含资源，但我们建议使用预生成的资源文件夹。

main.rs

最后是 main.rs 文件。main.rs 是应用程序的入口点，包含 fn main 函数。所有 Rust 可执行文件均从 main 函数开始运行。

HotDog 应用程序的 main 函数如下所示：

rust 复制代码

use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

启动函数会根据 dioxus 上启用的功能（网页/桌面/移动）调用相应的平台专用启动函数。启动函数接受一个根组件，通常称为 App。

我们将在下一章中更详细地讨论组件。

回归基础

基础模板为我们的应用程序提供了基本的启动代码。然而，我们希望真正从零开始，因此我们将清除 Hero 组件并清空 App 组件，使其回归基础：

rust 复制代码

use dioxus::prelude::*;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! { "HotDog!" }
}