Build a sample app

首先创建一个新的Rust库（重要：通过传入--lib 来创建一个库，而不是一个二进制文件）：

  1. cargo new --bin yew-app && cd yew-app

将yew和wasm-bindgen添加到您的依赖项中（最新版本请参阅此处）

  1. [package]
  2. name = "yew-app"
  3. version = "0.1.0"
  4. authors = ["Yew App Developer <name@example.com>"]
  5. edition = "2018"
  7. [lib]
  8. crate-type = ["cdylib", "rlib"]
  10. [dependencies]
  11. yew = "0.17"
  12. wasm-bindgen = "0.2.67"

将以下模板复制到您的src/lib.rs文件中：

  1. use wasm_bindgen::prelude::*;
  2. use yew::prelude::*;
  4. struct Model {
  5.     link: ComponentLink<Self>,
  6.     value: i64,
  7. }
  9. enum Msg {
  10.     AddOne,
  11. }
  13. impl Component for Model {
  14.     type Message = Msg;
  15.     type Properties = ();
  16.     fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
  17.         Self {
  18.             link,
  19.             value: 0,
  20.         }
  21.     }
  23.     fn update(&mut self, msg: Self::Message) -> ShouldRender {
  24.         match msg {
  25.             Msg::AddOne => self.value += 1
  26.         }
  27.         true
  28.     }
  30.     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
  31.         // 如果新传入的属性(Properties)与之前获取到的不同，就应该返回 "true"。
  32.         // 当前组件没有属性，所以只需要返回 "false".
  33.         false
  34.     }
  36.     fn view(&self) -> Html {
  37.         html! {
  38.             <div>
  39.                 <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
  40.                 <p>{ self.value }</p>
  41.             </div>
  42.         }
  43.     }
  44. }
  46. #[wasm_bindgen(start)]
  47. pub fn run_app() {
  48.     App::<Model>::new().mount_to_body();
  49. }

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

最后，在你的应用中新建一个static文件夹，然后将一个index.html文件添加到这个文件夹内：

  1. mkdir static
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Yew Sample App</title>
  6.         <script type="module">
  7.             import init from "./wasm.js"
  8.             init()
  9.         </script>
  10.     </head>
  11.     <body></body>
  12. </html>

运行你的应用程序!

最好是使用wasm-pack来启动和运行应用。如果还未安装wasm-pack，请先执行 cargo install wasm-pack 安装，接下来就可以用以下指令来构建和启动开发服务器：

  1. wasm-pack build --target web --out-name wasm --out-dir ./static

wasm-pack 会在 ./static目录下生成一个包，其中包含应用程序已编译的 WebAssembly ，以及一个 JavaScript 包装器，它将加载应用程序的 WebAssembly 二进制文件并运行它。

然后，使用您喜欢的Web服务器为./static下的文件提供服务。例如：

  1. cargo +nightly install miniserve
  2. miniserve ./static --index index.html