dioxus 是提供了cli 工具的，可以加速应用的开发, 同时也包含一个模版项目可以使用
工具安装
cargo install dioxus-cli
创建&简单项目试用
- clone项目
目前cli 似乎与官方说明的不太一致，可以先创建一个cargo 项目，然后执行dx create
dx create --template gh:dioxuslabs/dioxus-template
- 项目结构
├── Cargo.lock
├── Cargo.toml
├── Dioxus.toml
├── README.md
├── input.css
├── src
│ └── main.rs
└── tailwind.config.js
- 核心代码
src/main.rs
#![allow(non_snake_case)]
use dioxus_router::prelude::*;
use dioxus::prelude::*;
use log::LevelFilter;
fn main() {
// Init debug
dioxus_logger::init(LevelFilter::Info).expect("failed to init logger");
// 桌面应用
dioxus_desktop::launch(app);
}
// 类似yew 的开发模式
fn app(cx: Scope) -> Element {
render!{
Router::<Route> {}
}
}
// 基于路由的开发模式，还是比较方便的
#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
#[route("/")]
Home {},
#[route("/blog/:id")]
Blog { id: i32 },
}
#[component]
fn Blog(cx: Scope, id: i32) -> Element {
render! {
Link { to: Route::Home {}, "Go to counter" }
"Blog post {id}"
}
}
#[component]
fn Home(cx: Scope) -> Element {
let mut count = use_state(cx, || 0);
cx.render(rsx! {
Link {
to: Route::Blog {
id: *count.get()
},
"Go to blog"
}
div {
h1 { "High-Five counter: {count}" }
button { onclick: move |_| count += 1, "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" }
}
})
}
- 构建&&运行效果
cargo build --release
效果（对于debug 模式的构建可以使用调试）
说明
目前测试直接cargo 安装的cli 与官方文档说明不太一致，我是先创建的项目，然后在cargo 项目中执行的dx create,当然也可以直接基于github template 的clone ，dioxus 工具目前体验看着还是很不错的，值得深入学习下
参考资料
https://dioxuslabs.com/learn/0.4/CLI/installation
https://github.com/DioxusLabs/dioxus
https://github.com/dioxuslabs/dioxus-template