使用Yew 创建一个简单的WebAssembly 项目

2022-09-24 368 阅读1分钟

Yew 简介

Rust 多线程的 WebAssembly 前端框架。
官网；yew.rs/

环境配置

vs code 安装 rust-analyzer、Better TOML、crates、CodeLLDB 插件。
根据官网安装 Rust：www.rust-lang.org/zh-CN/tools…
安装 WebAssembly target：rustup target add wasm32-unknown-unknown
安装 Trunk： cargo install trunk

创建一个简单的 Yew app

cargo new yew-app -> cd yew-app

在 Cargo.toml 中添加 Yew 依赖。

 [dependencies]
 # you can check the latest version here: https://crates.io/crates/yew
 yew = "0.19"

在项目根目录下添加 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Yew App</title>
  </head>
</html>

更新 main.rs

use yew::prelude::\*;

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

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

运行 trunk serve -> 打开浏览器，可以看到 Hello, world!。至此一个简单的 Yew app 就完成了。

下篇: Yew app 在浏览器控制台打印 console.log