Yew Sample App

# 第一個簡單的 App 首先，先建立一個新的 binary 專案： ```bash cargo new --bin yew-app && cd yew-app ``` 在依賴庫裡加入 `yew` 與 `wasm-bindgen`（最新的版號，請參考[這裡](https://docs.rs/yew)） ```text title="Cargo.toml" [package] name = "yew-app" version = "0.1.0" authors = ["Yew App Developer "] edition = "2018" [dependencies] yew = "0.16" wasm-bindgen = "0.2" ``` 將下面的模板複製進你的 `src/lib.rs` 檔案： ```rust title="src/lib.rs" use wasm_bindgen::prelude::*; use yew::prelude::*; struct Model { link: ComponentLink, value: i64, } enum Msg { AddOne, } impl Component for Model { type Message = Msg; type Properties = (); fn create(_: Self::Properties, link: ComponentLink) -> Self { Self { link, value: 0, } } fn update(&mut self, msg: Self::Message) -> ShouldRender { match msg { Msg::AddOne => self.value += 1 } true } fn change(&mut self, _props: Self::Properties) -> ShouldRender { // 如果有新的不同屬性，應該只能回傳 true // 若是這個元件沒有任何屬性，那就可以只回傳 false false } fn view(&self) -> Html { html! {

{ self.value }

} } } #[wasm_bindgen(start)] pub fn run_app() { App::::new().mount_to_body(); } ``` 模板會建置名叫 `Model` 的根元件 `Component`，Model 會顯示一個按鈕，當你按下按鈕時， `Model` 會更新自己的狀態。需要特別注意的是，在 `main()` 裡的 `App::::new().mount_to_body()`，他會啟動你的 app 並且掛載 `Model` 裡的 HTML 到 `` 標籤中。如果你想要在啟動應用程式時，帶入動態的屬性，你可以改用 `App::::new().mount_to_body_with_props(..)`。最後，在你的專案，新增 `static` 資料夾，並新增 `index.html` 檔案到 static 裡。 ```bash mkdir static ``` ```bash title="index.html" Yew Sample App ``` ## 執行你的 App！使用 [`wasm-pack`](https://drager.github.io/wasm-pack/book/) 來執行專案是比較好的選擇。如果你還沒有做任何準備，先用`cargo install wasm-pack`安裝 `wasm-pack` ，然後用下面的指令，建置與開啟開發用伺服器： ```bash wasm-pack build --target web --out-name wasm --out-dir ./static ``` `wasm-pack` 會在 `./static` 裡產生一個 bundle，裡面包含專案編成的 WebAssembly，以及 JavaScript 的包裹器，這些東西都會在你的專案執行時被載入。最後，用你最喜歡的網頁伺服器，去啟動在`./static` 底下的檔案。範例： ```bash cargo +nightly install miniserve miniserve ./static --index index.html ```