Dioxus 全栈应用框架入门用一套 Rust 代码库构建 Web、桌面与移动应用【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxusDioxus 是一个用 Rust 编写的全栈应用框架目标是用同一套组件代码驱动 Web、桌面macOS/Linux/Windows、移动端iOS/Android乃至服务端渲染与 LiveView 等多种运行目标。本文以仓库中的 dioxus 元包 README 为核心结合源码Cargo.toml、lib.rs、launch.rs与仓库示例系统讲解如何用它完成从三行代码起一个交互界面到零配置热重载、信号式状态管理、全栈后端与一键打包的完整开发链路。一次面向所有平台的启动从use dioxus::prelude::*开始dioxus包是整个项目对外的统一入口umbrella crate。它把核心运行时、HTML 元素词汇表、信号/钩子/Store 状态体系、路由、各平台渲染器以及全栈服务器能力重新导出让应用代码只依赖这一个 crate 就能编译到任意目标平台。从根 Cargo.toml 可以看到dioxus当前的 workspace 版本为0.8.0-alpha.1packages/dioxus/Cargo.toml 中声明rust-version 1.85.0、edition 2024、license MIT OR Apache-2.0。它的prelude统一了开发时的导入习惯凡是典型的 Dioxus 应用第一行几乎都是use dioxus::prelude::*;dioxus::prelude见 packages/dioxus/src/lib.rs根据启用的 feature 条件性导出rsx!、component、Props等宏来自dioxus-core-macrouse_signal、use_memo等钩子来自dioxus-hooksSignal与Store类型来自dioxus-signals/dioxus-stores同时html模块内的div、button等以关联常量形式进入作用域Code、Key、Location、Modifiers等事件类型也被一并导出保证rsx!里的 JSX 风格标签和事件处理器无需额外use。一个计数器的解剖信号Signal、RSX 与细粒度重渲染关联文档给出的示例是一个完整可运行的High-Five 计数器。它浓缩了 Dioxus 的三个核心机制组件即函数、RSX 声明式 UI、信号驱动的细粒度重渲染。use dioxus::prelude::*; fn main() { dioxus::launch(app); } fn app() - Element { let mut count use_signal(|| 0); rsx! { h1 { High-Five counter: {count} } button { onclick: move |_| count 1, Up high! } button { onclick: move |_| count - 1, Down low! } } }拆开来看fn app() - Element组件是返回Element的普通函数。rsx!宏实现在dioxus-rsx仓库内的文档见 rsx crate把标签声明编译为静态模板 动态槽位编译期即可确定哪些部分需要运行时 diff。use_signal(|| 0)来自dioxus-hooks的响应式状态。Signal是Copy的可以自由进入闭包无需像Arc/Rc那样 clone。count的读取点h1中的插值{count}会被自动订阅只要count 1仅依赖它的那部分 UI 会重渲染其余节点保持不动——这与 React/Solid/Svelte 的取舍不同官方将其描述为兼顾三者的优点的易用状态管理。dioxus::launch(app)根据你启用哪个平台 feature把根组件挂载到对应的渲染目标上详见下文平台与 launch 机制。仓库中的经典入门示例与之一致examples/02-building-ui/counter.rs 增加了count.set(0)的 Reset 按钮并注明信号变化时读取它的 UI 会自动重渲染且信号复制代价低可放心移入事件处理器与闭包。若想进一步掌握信号体系可依次阅读 examples/04-managing-state/signals.rs、read_signal.rs、struct_signal.rs 与 vec_signal.rs基于dioxus-stores的嵌套响应式状态见 examples/04-managing-state/global.rs完整的 TodoMVC 示例见 examples/01-app-demos/todomvc.rs其中用use_memo派生未完成数与过滤列表展示了派生状态的惯用法。Quick start安装 dx CLI、创建并运行第一个应用关联文档给出的零配置起步路径依赖Dioxus CLIdx它是创建项目、启动开发服务器、热重载与打包的统一入口。CLI 的源码位于 packages/cli入口在 main.rs各子命令分布在 packages/cli/src/cli。# 安装 dioxus-cli curl -fsSL https://dioxuslabs.com/install.sh | bash # 创建一个新应用按模板提示操作 dx new my-app cd my-app # 然后分别用 --web / --desktop / --ios / --android 指定平台启动 dx serve --desktop说明dx new会交互式生成一个带标准目录结构src/main.rs、Dioxus.toml、assets/等的新工程对应 CLI 实现见 packages/cli/src/cli/create.rs。dx serve启动带热重载的开发服务器。从 packages/cli/src/cli/serve.rs 顶部注释可以看到dx serve默认透传 cargo 参数同时支持--web、--desktop、--android等渲染目标参数自 0.7 起还支持客户端与服务端构建的独立配置。项目级配置开发服务器端口、代理、资源与平台设置统一写在Dioxus.toml其 JSON Schema 见 packages/cli/schema.jsonCLI 自身默认配置模板见 packages/cli/Dioxus.toml。仓库根 README.md 补充了另一种运行方式直接cargo run --example example跑顶层示例而用 CLI 以 Web 平台跑示例时需要关闭桌面默认 feature 并打开 Web feature例如dx serve --example counters --platform web -- --no-default-features。注意main 分支示例针对仓库内 git 版 Dioxus 与 CLI本文所有命令与版本均以当前仓库内容为准。平台与 launch 机制feature 决定运行目标launch()之所以能一套代码跑多个平台奥秘在编译期启用哪个渲染器 featurelaunch()就会挂载到哪个渲染目标。相关能力由平台 feature 组合决定完整定义见 packages/dioxus/Cargo.toml分组feature作用默认default [launch, devtools, logger, lib]开箱即有启动、开发者工具、日志与库推荐组合库推荐lib含macro/html/signals/hooks/document/asset/warnings/cli-config供库作者使用的推荐集最小minimal [macro, html, signals, hooks, launch]追求最小二进制体积平台web/desktop/mobile/ssr/liveview/native/fullstack/server决定launch()挂载目标与rsx可用能力功能router、wasm-split、mounted、devtools等路由、WASM 代码分割、挂载时机、调试等平台的优先级在 packages/dioxus/src/launch.rs 中有明确注释从高到低为liveviewservernativedesktopmobileweb。但官方并不建议同时启用多个渲染器——feature 冲突与二进制体积膨胀都会随之而来若完全未启用任何渲染器launch()会直接 panic 并提示启用liveview, desktop, mobile, web, fullstack等平台 feature见 launch.rs。若需要更精细的启动控制可以使用LaunchBuilder同在 packages/dioxus/src/launch.rs.web()/.desktop()/.mobile()/.server()显式指定平台绕过 feature 优先级推断.with_context(...)/.with_context_provider(...)在应用启动前向根组件上下文注入可克隆状态或按需创建的状态工厂ContextFn为Send Sync的闭包用于依赖注入.with_cfg(config: impl LaunchConfig)传入平台特定配置例如桌面端用Config::new().with_window(WindowBuilder::new().with_title(My App))定制窗口标题.custom(launch_fn)为第三方渲染器接入LaunchBuilderAPI 提供通道。热重载毫秒级刷新与 Rust 热补丁关联文档强调的一条开发体验主线是dx serve启动后修改标记markup与样式毫秒级可见实验性的dx serve --hotpatch甚至可以实时更新 Rust 代码无需整机重启。其 CLI 参数定义见 packages/cli/src/cli/serve.rshotpatch长参数支持num_args0..1写法即--hotpatch可单独出现。从 notes/architecture/00-OVERVIEW.md 的架构总结看Dioxus 的热重载其实是两条互补链路RSX 热重载rsx!生成的静态模板与动态槽位分离模板字面量变化可通过 WebSocket 做差异下发无需重新编译 RustSubsecond 热补丁由subsecondcrate 提供跳转表间接寻址实现运行时函数级替换。对应运行时 cratesubsecond是dioxus元包的默认依赖见 packages/dioxus/Cargo.toml并在 lib.rs 被pub use subsecond重新导出。如果你想继续深入研究packages/rsx-hotreload 是模板差异检测的实现packages/devtools 负责开发期 WebSocket 调试协议。样式与素材HTML/CSS 体系与 TailwindCSSDioxus 的 UI 由真实 HTML/CSS 驱动rsx!写的就是语义化 HTML 元素样式则直接复用浏览器/CSS 生态。关联文档给出的结论是开箱即用的TailwindCSS 支持CLI 内置 tailwind 管道见 packages/cli/src/tailwind.rs完整示例见 examples/10-integrations/tailwind其中既有tailwind.css输入文件也有assets输出目录也可以直接引入任意你喜欢的 CSS 库需要原生触感时可在桌面/移动平台直接调用原生代码Objective-C、JNI、Web-Sys。现代 Dioxus 推荐用asset!宏在编译期处理样式表等素材manganis资产系统见 packages/manganis并在组件顶部声明const STYLE: Asset asset!(/examples/assets/todomvc.css);上面这行即来自 examples/01-app-demos/todomvc.rs。围绕样式与素材仓库还提供了大量专题示例见 examples/03-assets-styling含stylesheet.rs、inline_styles.rs、dynamic_styles.rs、css_modules.rs、fonts.rs、favicon.rs、meta.rs等。根 README 声称 Web 端hello world约 50kb、桌面/移动二进制小于 5mb属于官方在 README.md 中的自述指标可作为规模参考而非本文验证结论。真正的全栈与 axum 深度集成的服务端能力关联文档中Dioxus 深度集成 axum的论断在源码结构上有非常直接的证据dioxus元包把客户端与服务端解耦为多个 crates而官方在 README 中给出的内置电池清单为WebSockets、SSEServer-Sent Events、流式传输Streaming、文件上传/下载、服务端渲染SSR、表单Forms、中间件Middleware与热重载当然也可以绕开内置能力完全自定义地接入既有 axum 后端。相关实现分属packages/fullstack客户端/服务端协调层packages/fullstack-server基于 axum 的服务器集成即dioxus-server经 lib.rs 以dioxus::server导出并直接pub use dioxus_server::servepackages/fullstack-macro提供#[server]风格的 Server Function 宏元包通过serverfeature 引入见 packages/dioxus/Cargo.toml。Server Function 是 Dioxus 全栈体验的核心一个用属性标记的普通 Rust 函数会同时生成客户端可调用的序列化版本与服务端处理器两条代码路径从而在客户端像调用本地函数一样调用后端逻辑RPC 风格。官方在 examples/07-fullstack/server_functions.rs 中对其协议做了详细说明函数参数既可以是纯可序列化类型String、i32、VecT等作为请求 JSON body也可以实现 axum 的FromRequesttrait用于鉴权、session、cookie 等复杂提取器返回类型必须是Result其Ok类型可为Serialize DeserializeOwned回传 JSON或实现IntoResponseErr类型可选择ServerFnError带状态码与消息、StatusCode、HttpError或任意自定义错误。动手实践建议直接运行并阅读 examples/07-fullstack 下的一组示例从最小闭环 fullstack_hello_world.rs到 WebSocket websocket.rs、SSE server_sent_events.rs、流式响应 streaming.rs、文件上传 streaming_file_upload.rs、表单与登录 login_form.rs、中间件 middleware.rs再到服务端渲染 ssr-only 与自定义 axum 服务 custom_axum_serve.rs。每个示例的模块头注释都对应一份精炼协议文档。渲染器全景从 DOM 到 WGPUdioxus元包通过不同 feature 指向不同渲染器对应 crate 均经 lib.rs 按 feature 重新导出这是理解 Dioxus一套代码多端渲染的关键。仓库当前包含的渲染器路径与形态如下渲染器featurecrate / 实现位置适用场景Webwebpackages/web编译为 WASM 直接渲染到 DOMweb-sys桌面desktoppackages/desktopwry/tao WebViewmacOS/Linux/Windows移动mobile复用dioxus-desktopiOS/Android WebView直接调用 JNI 与原生 APISSRssrpackages/ssr服务端渲染出 HTMLLiveViewliveviewpackages/liveviewWebSocket 流式增量更新UI 状态留在服务端原生实验渲染器nativepackages/native实验性 WGPU 渲染器notes/architecture/00-OVERVIEW.md 里的 crate 依赖图把这一架构讲得很清楚最上层是dioxus伞形 crate其下是dioxus-coreVirtualDOM、runtime、调度器与generational-box为引用提供 Copy 语义再下分信号/钩子/html/router 等基础设施以及若干渲染器实现。关于渲染器值得注意的实现细节来自 packages/dioxus/src/launch.rs移动与桌面目前共用一个 WebView 启动路径mobile平台最终调用的是dioxus_desktop::launch::launch见 launch.rs移动端的价值在于通过 CLI 一键产出.apk/.ipa并直连 JNInative是独立平台它把桌面与移动统一为一个 WGPU 渲染目标与desktop/mobile不兼容若同时启用desktop与native会优先使用原生渲染器server是服务端形态挂载逻辑走dioxus_server::launch_cfg配合fullstack才能在客户端web与服务端之间共享同一套组件与 Server Function自定义渲染器场景官方也考虑到了嵌入 Bevy、WGPU 或嵌入式 Linux 的用法。若启用了third-party-rendererfeature 但没有任何第一方渲染器launch()会提示改由第三方渲染器 crate 自身的 launch 函数启动launch.rs。打包发布dx bundle关联文档给出的发布路径非常简洁——dx bundle一次命令完成构建与打包CLI 实现见 packages/cli/src/cli/bundle.rs核心在 packages/cli/src/bundlerWeb 端自动化做.avif图片生成、.wasm压缩与代码压缩/混淆桌面端产出 macOS、Linux、Windows 的安装包/可分发产物集成打包逻辑在 packages/cli/src/bundler 中分平台实现移动端配合dx serve --platform android等命令产出面向模拟器/真机的构建。如果你关注 WASM 体积仓库还提供了代码分割能力wasm-splitfeature 开启后配合wasm_splittercrate见 packages/dioxus/Cargo.toml可把大体积依赖拆成按需加载的 chunk实现机制与宏实现在 packages/wasm-split。官方声称的其它能力与验证方式关联文档还罗列了几项值得知道的产品能力在仓库中分别有对应证据或示例First-party 基础组件Primitive components文档称其建模参考 shadcn/ui 与 Radix-Primitives用于快速起步Web 组件互操作与自定义元素见 examples/09-reference/web_component.rs 与 custom_element.rs内置类型安全的表单事件体系HTML 事件在 packages/html 中定义事件处理相关示例见 examples/09-reference/all_events.rs详尽的元素级文档与示例html crate 中所有元素与监听器均参考 MDN 文档注释packages/html/docs元包通过htmlfeature 将其导出lib.rs。对于想快速验证上述任意能力的人仓库的 examples 目录是按主题组织的活文档02-building-ui构建 UI 基础、04-managing-state状态管理、05-using-async异步与 Suspense、06-routing路由实现见 packages/router、07-fullstack全栈、08-apis桌面/原生 API、10-integrationsTailwind、PWA、WGPU 等集成AGENTS.md 也提供了面向贡献者的整体导览。小结一篇文章理解 Dioxus 的分层模型回到关联文档那句核心结论——用单一代码库为 Web、桌面、移动端及更多平台构建应用零配置启动、集成热重载、基于信号的状态管理用 Server Functions 添加后端能力并用 CLI 完成打包——它可以被拆成五条可逐一验证的工程事实单一元包 feature 路由平台dioxuscrate 通过 Cargo features 把launch()分发到web/desktop/mobile/liveview/native/server渲染器launch.rs声明式 RSX Copy 语义信号UI 用rsx!声明状态用use_signal变化自动触发最小范围重渲染CLI 贯穿全流程dx new→dx serve --desktop含热重载与实验性--hotpatch→dx bundle全栈即一等公民axum 深度集成的 Server Function 让前后端一个仓库、一种语言、一套类型成为默认范式生态分层清晰架构全景见 notes/architecture/00-OVERVIEW.md自上而下依次是伞形 crate、coreVirtualDOM/diff、信号/钩子/路由等基础库、各平台渲染器与全栈服务端组件。在动手写第一个rsx!组件之前建议把 examples/02-building-ui 中按难度递增的十几个示例从头跑一遍它们比任何长篇文档都更能帮你建立组件即函数、状态即信号的心智模型。【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
