22 个不稳定版本 (5 个破坏性版本)

0.6.0	2024 年 8 月 2 日
0.5.0	2024 年 4 月 5 日
0.4.3	2024 年 2 月 28 日
0.4.1	2023 年 12 月 2 日
0.1.0-alpha.0	2020 年 12 月 23 日

#142 in 网页编程

每月 212 次下载
用于 5 crates

MIT/Apache

445KB
12K SLoC

Vertigo

带有 SSR 的 Rust 反应式 Real-DOM 库

特性

反应式依赖 - 值和客户端（微订阅）的图，可以自动计算在值变化后需要刷新的内容
Real DOM - 不需要中间的 Virtual DOM 机制
HTML/CSS 宏 - 允许使用 HTML 和 CSS 构建实体的 DOM 节点
服务器端渲染 - 使用 vertigo-cli 时直接提供

查看变更日志了解最新特性。

如果您想尝试，请访问教程。

示例

依赖项

vertigo = "0.6"

示例 1

use vertigo::{dom, DomNode, Value, bind, main};

#[main]
pub fn app() -> DomNode {
    let count = Value::new(0);

    let increment = bind!(count, || {
        count.change(|value| {
            *value += 1;
        });
    });

    let decrement = bind!(count, || {
        count.change(|value| {
            *value -= 1;
        });
    });

    dom! {
        <html>
            <head/>
            <body>
                <div>
                    <p>"Counter: " { count }</p>
                    <button on_click={decrement}>"-"</button>
                    <button on_click={increment}>"+"</button>
                </div>
            </body>
        </html>
    }
}

示例 2

use vertigo::{css, component, DomNode, Value, dom, main};

#[component]
pub fn MyMessage(message: Value<String>) {
    dom! {
        <p>
            "Message to the world: "
            { message }
        </p>
    }
}

#[main]
fn app() -> DomNode {
    let message = Value::new("Hello world!".to_string());

    let main_div = css!("
        color: darkblue;
    ");

    dom! {
        <html>
            <head/>
            <body>
                <div css={main_div}>
                    <MyMessage message={message} />
                </div>
            </body>
        </html>
    }
}

查看更多示例请访问此处。

`vertigo-cli` 工具的安装

为了简化过程或开发，使用 vertigo-cli 工具，该工具允许您构建、提供和监视您的项目。

cargo install --force vertigo-cli

演示应用程序

准备

确保您正在使用 rust 的夜间版本

rustup默认夜间

安装 cargo-make 和 vertigo-cli

cargoinstall cargo-make vertigo-cli

运行

使用以下命令构建并运行项目

cargomake demo-start

最终终端会通知您应用程序在 https://127.0.0.1:4444/ 下可用

如果您想对代码进行实验，可以创建一个用于监视您更改的货物

cargomake demo-watch

项目重新编译后，浏览器将自动刷新。

如果您想在演示中使用“聊天”，您需要先在单独的终端中运行WebSocket服务器，命令如下

cargomake demo-serve-api

要在监视模式下运行示例（它们将在localhost:4444上运行）：cargo make examples-counter 或 cargo make examples-router 或 cargo make examples-trafficlights

一个即将成长的社区

Discord服务器： https://discord.gg/HAXtTeFrAf

依赖项

~3.5–4.5MB
~86K SLoC