开启 dioxus 之旅

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

在线体验

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

内容简介

本专题将通过3个案例，对 dioxus Web 开发进行讨论。你将学习到：

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

关注

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

案例说明

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

方法二、编译二进制程序

检验安装是否成功：

dx --version

对于我们而言，由于只需要开发 dioxus，所以只需安装 dioxus-cli（dx）即可

创建项目

创建项目的命令如下：

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 仓库。