快速开始

eastspire大约 1 分钟euvuirustwasmquick-startquickstart

快速开始

提示

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

1. 创建项目

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

2. 添加依赖

在 Cargo.toml 中添加：

[dependencies]
euv = "0.2"
wasm-bindgen = "0.2"

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

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);
    let count_updater: Signal<i32> = count;
    rsx! {
        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: NativeEvent| {
                    let current: i32 = count_updater.get();
                    count_updater.set(current + 1);
                }
                "Increment"
            }
        }
    }
}

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-cli 开发服务器

cargo install euv-cli
euv-cli --crate-path . --www-dir ./www --port 3000

提示

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

6. 在浏览器中查看

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