第一章：Dioxus 框架入门与环境搭建

1. 什么是 Dioxus

Dioxus 是一个用于构建跨平台用户界面的 Rust 框架。它受到 React 的启发，但充分利用了 Rust 的性能和安全性优势。

核心特性：

| 特性 | 说明 | |------|------| | 声明式 UI | 用 RSX 语法描述界面，框架负责更新 | | 响应式状态 | Signal 自动追踪依赖，精准重渲染 | | 跨平台 | 同一套代码可编译到 Web/桌面/移动端/服务端 | | 零成本抽象 | 无虚拟 DOM 运行时开销，编译时优化 |

支持的平台：

// 同一个组件，不同平台
#[component]
fn App() -> Element {
    rsx! { "Hello, Dioxus!" }
}

// Web  SPA:  dioxus::launch(App)  → 浏览器 WASM
// 桌面 应用: dioxus::launch(App)  → 原生窗口
// SSR 渲染: dioxus_ssr::render   → HTML 字符串
// LiveView: 服务端运行，客户端实时同步

2. 环境搭建

2.1 安装 Rust

# 安装 Rust（如果还没有）
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 确保 Rust 是最新版本
rustup update stable

# 添加 WASM 编译目标（Web 应用需要）
rustup target add wasm32-unknown-unknown

2.2 安装 Dioxus CLI

cargo install dioxus-cli

2.3 创建新项目

# 方式一：使用 CLI 创建
dx new my-blog
cd my-blog

# 方式二：手动创建
cargo new my-blog --bin
cd my-blog

2.4 配置 Cargo.toml

[dependencies]
dioxus = { version = "0.7", features = ["web"] }

# 如果开发 SSR 应用，添加：
# dioxus = { version = "0.7", features = ["fullstack"] }
# dioxus-ssr = "0.7"

3. 第一个组件

3.1 Hello World

use dioxus::prelude::*;

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

#[component]
fn App() -> Element {
    let name = "Dioxus";

    rsx! {
        div { class: "container",
            h1 { "Hello, {name}!" }
            p { "欢迎来到 Dioxus 的世界" }
            button { "点击我" }
        }
    }
}

3.2 运行

# Web 模式（开发服务器 + 热重载）
dx serve

# 或直接编译为 WASM 用任意 HTTP 服务器托管
dx build --release

4. 项目结构

my-blog/
├── Cargo.toml           # 依赖配置
├── src/
│   └── main.rs          # 入口文件
├── public/
│   └── index.html       # HTML 模板
└── assets/              # 静态资源

5. RSX 初体验

RSX 是 Dioxus 的声明式 UI 语法，类似 HTML 但嵌入在 Rust 代码中：

rsx! {
    div { class: "card",
        h2 { "标题" }
        p { "段落文本" }
        ul {
            li { "项目 1" }
            li { "项目 2" }
            li { "项目 3" }
        }
        button {
            class: "btn-primary",
            onclick: move |_| println!("点击了"),
            "提交"
        }
    }
}

关键规则：

• 元素名用小写（div、p、button）
• 属性用双引号（class: "..."）
• 动态值用花括号（{variable}）
• 事件用闭包（onclick: move |e| ...）

6. 小结

• Dioxus 是一个 Rust 跨平台 UI 框架，支持 Web/桌面/移动/SSR
• 使用 dioxus::launch(App) 启动应用
• RSX 语法是声明式 UI 的核心
• CLI 工具 dx 提供开发服务器和构建功能
• 下一章将深入学习组件化开发