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