快速开始

eastspire2026/5/15大约 1 分钟euvuirustwasmquick-startquickstart

快速开始

提示

这是基于 euv 框架的快速入门指南，帮助你快速搭建一个 WebAssembly UI 应用。

1. 创建项目

cargo new my-euv-app
cd my-euv-app

2. 添加依赖

在 Cargo.toml 中添加：

[package]
edition = "2024"

[dependencies]
euv = "*"
lombok-macros = "*"

[lib]
crate-type = ["cdylib", "rlib"]

3. 编写应用

在 src/lib.rs 中编写你的 euv 应用：

use euv::*;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn main() {
    console_error_panic_hook::set_once();
    mount("#app", app);
}

fn app() -> VirtualNode {
    let count: Signal<i32> = use_signal(|| 0);
    html! {
        div {
            style: {text_align: "center"; margin_top: "50px";}
            h1 { "Hello, euv!" }
            p {
                "Count: "
                span {
                    style: {font_weight: "700"; color: "#4f46e5"; font_size: "24px";}
                    count
                }
            }
            button {
                style: {padding: "10px 22px"; border_radius: "8px"; background: "#4f46e5"; color: "white"; border: "none"; cursor: "pointer"; font_size: "14px";}
                onclick: move |_event: Event| {
                    let current: i32 = count.get();
                    count.set(current + 1);
                }
                "Increment"
            }
        }
    }
}

提示

console_error_panic_hook::set_once() 用于在浏览器控制台显示 panic 信息，开发时必须调用。mount 的第二个参数 app 是函数名，mount 内部会调用该函数获取初始虚拟 DOM 树。

提示

euv 重新导出了 js-sys、web-sys、wasm-bindgen、wasm-bindgen-futures、console_error_panic_hook，无需在 Cargo.toml 中单独添加这些依赖。通过 use euv::* 即可访问所有 API。

4. 创建 HTML 入口

在项目根目录创建 www/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My euv App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import init, { main } from './pkg/my_euv_app.js';
      await init();
      main();
    </script>
  </body>
</html>

5. 构建与运行

使用 wasm-pack 构建

wasm-pack build --target web --out-dir www/pkg

使用 euv 开发服务器

cargo install euv-cli
euv run --crate-path . --www-dir ./www --port 80 -- --target web

提示

euv 提供热重载功能，文件修改后自动重新编译和刷新浏览器。

6. 在浏览器中查看

打开浏览器访问 http://127.0.0.1:80/www/index.html