Skip to main content
Version: 0.18.0

第一个简单的 App

首先,创建一个新的 cargo 项目:

cargo new yew-app

进入刚刚创建的目录。

现在,让我们在Cargo.toml文件中添加yew作为依赖项:

[package]name = "yew-app"version = "0.1.0"edition = "2018"
[dependencies]# 你可以在此处查看最新版本: https://crates.io/crates/yewyew = "0.18"

将以下代码复制到您的src/main.rs文件中:

use yew::prelude::*;
enum Msg {    AddOne,}
struct Model {    // `ComponentLink` is like a reference to a component.    // It can be used to send messages to the component    link: ComponentLink<Self>,    value: i64,}
impl Component for Model {    type Message = Msg;    type Properties = ();
    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {        Self {            link,            value: 0,        }    }
    fn update(&mut self, msg: Self::Message) -> ShouldRender {        match msg {            Msg::AddOne => {                self.value += 1;                // the value has changed so we need to                // re-render for it to appear on the page                true            }        }    }
    fn change(&mut self, _props: Self::Properties) -> ShouldRender {        // Should only return "true" if new properties are different to        // previously received properties.        // This component has no properties so we will always return "false".        false    }
    fn view(&self) -> Html {        html! {            <div>                <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>                <p>{ self.value }</p>            </div>        }    }}
fn main() {    yew::start_app::<Model>();}

这份代码通过一个 Model 构建了你的根 组件,它会显示一个按钮,当你点击按钮时,Model 将会更新自己的状态。特别注意 main() 中的 yew::start_app::<Model>(),它会启动你的应用并将其挂载到页面的 <body> 标签中。如果你想使用任何动态属性来启动应用程序,则可以使用 yew::start_app_with_props::<Model>(..)

最后,将index.html文件添加当前应用的根目录下:

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

运行你的应用程序!#

如果尚未安装 Trunk,请执行以下操作:

cargo install trunk wasm-bindgen-cli

wasm32-unknown-unknown添加为编译目标。 如果还未安装,请使用 Rustup 运行以下指令:

rustup target add wasm32-unknown-unknown

现在,您所要做的就是运行以下命令:

trunk serve

这将启动一个开发服务器,该服务器在您每次进行更改时都会更新应用程序。

常见问题#

  • Trunk 安装失败:

    确保你已经安装了 openssl 的开发包。例如,Ubuntu 上的 libssl-dev 或 Fedora 上的 openssl-devel。