跳至主要内容
版本：0.21

构建示例应用程序

环境准备就绪后，你可以选择使用包含基础 Yew 应用程序所需样板的启动模板，或手动设置一个小项目。

使用启动模板​

按照安装说明安装 cargo-generate，然后运行以下命令

cargo generate --git https://github.com/yewstack/yew-trunk-minimal-template

手动设置应用程序​

创建项目​

首先，创建一个新的 cargo 项目。

cargo new yew-app

打开新创建的目录。

cd yew-app

运行一个 hello world 示例​

要验证 Rust 环境是否已设置，请使用 cargo run 运行初始项目。你应该会看到一条“Hello World！”消息。

cargo run
# output: Hello World!

将项目设置为 Yew Web 应用程序​

要将此简单的命令行应用程序转换为基本 Yew Web 应用程序，需要进行一些更改。

更新 Cargo.toml​

将 yew 添加到依赖项列表中。

[package]
name = "yew-app"
version = "0.1.0"
edition = "2021"

[dependencies]
# this is the development version of Yew
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
信息

只有在构建应用程序时才需要 csr 功能。它将启用 Renderer 和所有客户端渲染相关代码。

如果你正在制作一个库，请不要启用此功能，因为它会将客户端渲染逻辑引入服务器端渲染包中。

如果你需要 Renderer 进行测试或示例，你应该在 dev-dependencies 中启用它。

更新 main.rs​

我们需要生成一个模板，该模板设置一个名为 App 的根组件，该组件渲染一个按钮，该按钮在单击时更新其值。用以下代码替换 src/main.rs 的内容。

注释

main 函数中对 yew::Renderer::<App>::new().render() 的调用启动了应用程序，并将其挂载到页面的 <body> 标记。如果您希望使用任何动态属性启动应用程序，则可以使用 yew::Renderer::<App>::with_props(..).render()。

use yew::prelude::*;

#[function_component]
fn App() -> Html {
    let counter = use_state(|| 0);
    let onclick = {
        let counter = counter.clone();
        move |_| {
            let value = *counter + 1;
            counter.set(value);
        }
    };

    html! {
        <div>
            <button {onclick}>{ "+1" }</button>
            <p>{ *counter }</p>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

创建 index.html​

最后，在应用程序的根目录中添加一个 index.html 文件。

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

查看 Web 应用程序​

运行以下命令以在本地构建并提供应用程序。

trunk serve
信息

添加选项 '--open' 以打开默认浏览器 trunk serve --open。

如果您修改了任何源代码文件，Trunk 将重新构建您的应用程序。默认情况下，服务器将在地址“127.0.0.1”和端口“8080”上进行侦听 => http://localhost:8080。要更改它，请创建以下文件并根据需要进行编辑

Trunk.toml
[serve]
# The address to serve on LAN.
address = "127.0.0.1"
# The address to serve on WAN.
# address = "0.0.0.0"
# The port to serve on.
port = 8000

恭喜​

您现在已成功设置 Yew 开发环境，并构建了第一个 Web 应用程序。

尝试使用此应用程序并查看 示例 以进一步学习。