开启 dioxus 之旅

本章将讨论 dioxus 的安装、项目创建、运行和构建。

在线体验

开始之前，你可以先体验本专题的三个案例（由于域名、服务器等因素，不对以下站点作任何可用性保证）

• 案例1：计算器
• 案例2：博客
• 案例3：阅后即焚 （由于前端和API分别部署在不同服务器，请耐心等待服务器响应）

• dioxus 组件
  • rsx 语法
  • 组件的定义和使用
  • 组件的通讯
  • 事件处理
  • 组件状态管理
• 布局
• 数据的填充
  • 条件填充
  • 列表填充
• 获取远程数据
• 整合 Tailwind CSS
• 表单绑定
• 路由
• 全局状态管理

关注

我们专注于 dioxus 的 Web 开发，将其视为 React/Vue 等前端框架的替代品，并于 AXUM 实现动静分离开发。

• 我们只关注 Web 开发。dioxus 支持全平台、全栈开发，但我们只将其作为前端开发工具。
• 我们不使用 dioxus 的 fullstack。dioxus 官方提供了『全栈』开发的，但我们不会使用它
  • 虽然 dioxus 的 fullstack 使用的也是 axum，但通常是前版本的 axum
  • dioxus 的 fullstack 将前后端代码耦合到了一起，这不是我们想要的
• 我们不使用 dioxus 的 Tailwind CSS。dioxus 官方提供了 Tailwind CSS 的支持，但我们不使用它
  • dioxus 集成的是 Tailwind CSS v3，而最新版是 Tailwind CSS v4
  • dioxus 所谓的『集成』，只是添加了一个 input.css 文件，并没有完整的 Tailwind CSS 环境。开发人员仍需手动安装 Tailwind CSS
  • 相较于 v3，Tailwind CSS v4 的安装简单的多
• 我们不使用 dioxus 的服务端渲染。由于 dioxus 服务端渲染还不成熟，所以我们不使用它。──虽然本专题一开始的目标是使用 AXUM 和 dioxus 服务端渲染，然，由于该功能还不成熟，只能作罢。

案例说明

本专题将创建3个案例进行讲解：

• 案例1：计数器。通过该案例，你将学习到 dioxus Web 开发的基础知识，包括：组件、rsx、组件状态、事件处理、组件通讯及整合 Tailwind CSS 等
• 案例2：博客。通过该案例，你将学习到 dioxus Web 开发的更多知识，包括：请求远程数据、路由、条件渲染、列表渲染等
• 案例3：阅后即焚。通过该案例，你将学习到 dioxus Web 开发的高级知识，比如：全局状态、布局、表单绑定等
  • dioxus 构建前端
  • axum 构建后端
  • dioxus Web 的部署

dioxus 工具链

安装

安装 dioxus 工具链的方式有2种：一是借助第三方工具安装其二进制程序；二是编译其二进制程序。你可以任选其一

方法一、通过工具安装二进制程序

首先，需要安装 cargo-binstall：

curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash

然后，通过它来安装二进制程序：

cargo binstall dioxus-cli

cargo install dioxus-cli

检验安装是否成功：

dx --version

创建项目

创建项目的命令如下：

dx new <项目名>

它会询问几个问题，可根据实际情况进行选择，但对于本专题而言，应按如下进行选择：

✔ 🤷   Which sub-template should be expanded? · Bare-Bones
✔ 🤷   Do you want to use Dioxus Fullstack? · false
✔ 🤷   Do you want to use Dioxus Router? · false
✔ 🤷   Do you want to use Tailwind CSS? · false
✔ 🤷   Which platform do you want DX to serve by default? · Web

开发项目

dx serve 是 dioxus 提供的一个功能实用的命令：

源码

本专题源码位于 AxumCourse/dioxus 仓库。