dioxus 简单试用

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