Dioxus 0.6 入门指南

Dioxus 是一个基于 Rust 的高效、灵活的前端框架，适用于构建 Web、桌面和移动应用。本文将带你快速上手 Dioxus 0.6，帮助你从零开始构建一个简单的应用。

---

1. 安装 Dioxus

1.1 安装 Rust

Dioxus 是基于 Rust 的框架，因此首先需要安装 Rust 工具链。如果尚未安装，可以通过以下命令安装：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

安装完成后，确保 Rust 工具链是最新的：

rustup update

1.2 安装 Dioxus CLI

Dioxus CLI 是开发 Dioxus 应用的必备工具，它提供了项目初始化、开发服务器启动、构建和打包等功能。使用以下命令安装 Dioxus CLI：

cargo install dioxus-cli

安装完成后，可以通过以下命令验证安装是否成功：

dx --version

---

2. 创建新项目

2.1 初始化项目

使用 Dioxus CLI 初始化一个新项目：

dx new my_dioxus_app
cd my_dioxus_app

2.2 项目结构

初始化后的项目结构如下：

my_dioxus_app/
├── src/
│   └── main.rs
├── Cargo.toml
└── Dioxus.toml

• src/main.rs：应用的主入口文件。
• Cargo.toml：Rust 项目的配置文件，定义了依赖和项目元数据。
• Dioxus.toml：Dioxus 项目的配置文件，定义了应用的基本设置。

---

3. 编写第一个 Dioxus 应用

3.1 修改 src/main.rs

打开 src/main.rs 文件，你会看到以下代码：

use dioxus::prelude::*;

fn main() {
    launch(App);
}

fn App() -> Element {
    rsx! {
        div {
            "Hello, Dioxus!"
        }
    }
}

这段代码定义了一个简单的 Dioxus 应用，渲染了一个包含文本 "Hello, Dioxus!" 的 div 元素。

3.2 运行项目

在项目根目录下运行以下命令启动开发服务器：

dx serve

打开浏览器访问 http://localhost:8080，你会看到页面上显示 "Hello, Dioxus!"。

---

4. 添加交互功能

4.1 使用状态

Dioxus 提供了 use_signal 钩子来管理组件的状态。以下是一个简单的计数器示例：

use dioxus::prelude::*;

fn main() {
    launch(App);
}

fn App() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        div {
            h1 { "Counter: {count}" }
            button {
                onclick: move |_| count += 1,
                "Increment"
            }
        }
    }
}

在这个示例中，我们定义了一个 count 状态，并在按钮点击时增加计数器的值。

4.2 运行项目

再次运行 dx serve，打开浏览器访问 http://localhost:8080，你会看到一个计数器应用，点击按钮可以增加计数器的值。

---

5. 配置项目

5.1 修改 Cargo.toml

Cargo.toml 是 Rust 项目的配置文件。以下是一个示例配置：

[package]
name = "my_dioxus_app"
version = "0.1.0"
authors = ["Your Name <your.email@example.com>"]
edition = "2021"

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

5.2 修改 Dioxus.toml

Dioxus.toml 是 Dioxus 项目的配置文件。以下是一个示例配置：

[application]
name = "my_dioxus_app"

[web.app]
title = "My Dioxus App"

[web.resource]
style = []

[web.resource.dev]
script = []

---

6. 构建与部署

6.1 构建生产版本

在项目根目录下运行以下命令构建生产版本：

dx build --release

构建完成后，生成的文件会存放在 dist 目录中。

6.2 部署应用

将 dist 目录中的文件上传到你的服务器或静态网站托管服务（如 GitHub Pages、Netlify 等），即可完成部署。

---

7. 总结

通过本文，你已经学会了如何安装 Dioxus、创建新项目、编写简单的应用以及配置和部署项目。Dioxus 是一个强大而灵活的前端框架，适合构建各种类型的应用。希望本文能帮助你快速上手 Dioxus，开启你的 Rust 前端开发之旅！

高效开发，从 Dioxus 开始！ 🚀