Yew框架入门：构建你的第一个Web应用

罗愉伊

于 2025-06-01 09:00:17 发布

阅读量283

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00896/article/details/148359820

版权

Yew框架入门：构建你的第一个Web应用

yew Rust / Wasm framework for creating reliable and efficient web applications 项目地址: https://gitcode.com/gh_mirrors/ye/yew

Yew是一个现代化的Rust框架，用于构建高效、可靠的Web应用程序。本文将带你从零开始，通过两种方式构建你的第一个Yew应用：使用项目模板和手动配置项目。

环境准备

在开始之前，请确保你已经安装了Rust工具链（包括cargo）和Trunk构建工具。Trunk是专为Rust WebAssembly应用设计的构建工具，能够简化开发流程。

方法一：使用项目模板快速开始

对于初学者来说，使用现成的项目模板是最快捷的方式。Yew提供了一个最小化的模板，包含了构建基础应用所需的所有配置。

安装cargo-generate工具

首先需要安装cargo-generate工具，它可以帮助我们快速生成项目结构：

cargo install cargo-generate

生成项目

使用以下命令从模板创建新项目：

cargo generate --git yew-trunk-minimal-template

这个命令会创建一个包含基本Yew应用结构的项目目录。

运行项目

进入项目目录后，使用Trunk启动开发服务器：

trunk serve

Windows用户注意：如果遇到trunk serve命令失败的情况，可以先运行trunk build，然后再运行trunk serve。

方法二：手动配置项目

如果你想更深入地了解Yew的工作原理，可以尝试手动配置项目。

创建新项目

首先创建一个标准的Rust项目：

cargo new yew-app
cd yew-app

验证环境

运行初始项目确保Rust环境配置正确：

cargo run

你应该能看到"Hello World!"的输出。

转换为Yew应用

接下来需要将命令行应用转换为Web应用。

修改Cargo.toml

添加Yew依赖项：

[dependencies]
yew = { features = ["csr"] }

关键说明：

csr特性表示启用客户端渲染功能
如果是开发库而非应用，不应启用此特性
测试或示例代码中的渲染器应该放在dev-dependencies中

编写主程序

替换src/main.rs内容为以下代码：

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();
}

这段代码实现了一个简单的计数器应用，点击按钮数字会增加。

核心概念：

use_state是Yew的响应式状态钩子
html!宏用于声明式UI构建
Renderer负责将应用挂载到DOM

创建HTML文件

在项目根目录添加index.html：

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

运行和调试

使用以下命令启动开发服务器：

trunk serve --open

Trunk会自动监视文件变化并重新构建。默认访问地址是http://localhost:8080。

自定义服务器配置

创建Trunk.toml文件可以修改服务器设置：

[serve]
address = "127.0.0.1"
port = 8000

总结

通过本文，你已经学会了：

使用模板快速创建Yew应用
手动配置Yew项目的基本结构
编写简单的交互式组件
运行和调试Yew应用

接下来，你可以尝试修改计数器应用，或者探索Yew提供的更多功能，如组件通信、路由管理等。Yew的强大功能结合Rust的安全保证，为构建复杂Web应用提供了坚实基础。

yew Rust / Wasm framework for creating reliable and efficient web applications 项目地址: https://gitcode.com/gh_mirrors/ye/yew

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考