Rust框架Yew的使用

Frey February 26, 2022 [编程] #rust #webassembly

环境搭建

Yew框架也是将rust代码编译成WebAssembly，添加target

rustup target add wasm32-unknown-unknown

安装trunk，他与wasm-pack类似，是将rust编译成wasm的重要工具。

cargo install trunk

实现Hello World

1.创建项目，用cargo创建一个新的project

cargo new yew-app

2. 添加依赖，在Cargo.toml中添加yew依赖

[dependencies]
yew = { git = "https://github.com/yewstack/yew/" }

3.实现Hello World

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{ "Hello World" }</h1>
    }
}

fn main() {
    yew::start_app::<App>();
}

4.在项目根目录下创建index.html

<!DOCTYPE html>
<html
>
<head>
</head>
<body>

</body>
</html>

启动Web应用

trunk serve