Skip to main content
Version: Next

构建一个示例应用

当您的环境准备好后，您可以选择使用一个包含基本 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]
# 开发版本的 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]
# 局域网上的监听地址
address = "127.0.0.1"
# 广域网上的监听地址
# address = "0.0.0.0"
# 监听的端口
port = 8000

恭喜​

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

尝试这个应用程序，并查看示例以进一步学习。