【Dioxus】创建并运行 Dioxus 项目

一、创建新项目

执行以下命令并按提示选择配置：

bash 复制代码

dx new hot_dog

模板选择

模板	说明
Minimal	最简配置，仅包含 `main.rs` 和 `assets` 文件夹
Jumpstart	支架式应用，包含组件、视图和建议的项目结构
Workspace	完整的 Cargo 工作区配置，每个平台独立 crate

本示例选择 Minimal 模板。

配置选项

选项	选择	说明
全栈网站	`false`	不需要服务端功能
路由	`false`	后续可手动添加
TailwindCSS	`true`	启用 CSS 框架
LLM 提示	`false`	不需要 AI 辅助
默认平台	`Web`	以 Web 作为开发目标

📣 Dioxus 应用本质上是 Rust 项目，也可以通过 cargo 等工具构建，但 dx new 提供了更便捷的模板生成。

二、运行项目

进入项目目录并启动开发服务器：

bash 复制代码

cd hot_dog
dx serve

该命令会触发 Cargo 构建，并启动 Web 服务器。在浏览器中访问 http://127.0.0.1:8080，即可看到应用：

加载画面：首次访问时显示加载状态
应用界面：加载完成后显示默认的 Dioxus 模板应用

三、应用结构

text 复制代码

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

3.1 Cargo.toml

定义项目依赖和编译器设置。所有 Rust 应用均通过 cargo 编译聚合为可执行文件。

toml 复制代码

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

特性配置（Features）

dx 会根据 --web、--desktop、--mobile 等标志启用对应的特性：

toml 复制代码

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

3.2 Dioxus.toml

包含 Dioxus 专用配置，用于捆绑和部署应用。本示例无需额外配置。

3.3 assets/

存放资源文件（图片、样式等）。推荐使用 asset!() 宏引入资源（详见"样式与资产"章节）。

3.4 Tailwind CSS

Dioxus 内置 TailwindCSS 支持。在开发或构建时，如果检测到项目根目录存在 tailwind.css，dx 会自动运行 Tailwind CLI，编译输出默认存放在 assets/ 文件夹中。

3.5 src/main.rs

应用入口文件，包含 main 函数------所有 Rust 可执行文件的起点。

rust 复制代码

use dioxus::prelude::*;

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

launch 根据启用的平台特性（web/desktop/mobile）调用对应的平台功能
launch 接受根组件（通常称为 App）

四、清空模板，从零开始

如果希望从最简代码起步，可将 App 组件精简为：

rust 复制代码

use dioxus::prelude::*;

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

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

上述代码仅渲染文本 "HotDog!"，是最基础的 Dioxus 组件示例。