当前位置：首页 > Rust > 正文

Rust语言Yew前端框架入门指南（手把手教你用Yew构建高性能Web应用）

主机测评网
Rust
2025-12-16
329

在现代Web开发中，Rust语言凭借其内存安全、零成本抽象和卓越性能，正逐渐成为构建高性能前端应用的新宠。而Yew框架正是Rust生态中用于构建客户端Web应用的明星库。本教程将带你从零开始，轻松掌握Rust前端开发的核心技能，即使你是编程新手也能快速上手！

Rust语言Yew前端框架入门指南（手把手教你用Yew构建高性能Web应用） Rust前端开发 Yew框架教程 WebAssembly前端 Rust构建Web应用第1张

什么是Yew？

Yew 是一个基于 Rust 的现代化前端框架，它利用 WebAssembly（Wasm）技术，让你能用 Rust 编写高性能的单页应用（SPA）。与 React 类似，Yew 采用组件化架构，并支持 JSX 风格的 HTML 模板语法（称为 html! 宏），同时完全兼容现代浏览器。

为什么选择 Yew？

✅ 高性能：Rust 编译为 WebAssembly，运行速度接近原生
✅ 内存安全：无垃圾回收，避免运行时崩溃
✅ 类型安全：编译期捕获大量错误，提升开发体验
✅ 生态系统成熟：与 Cargo、wasm-pack 等工具无缝集成

环境准备

在开始前，请确保已安装以下工具：

Rust 工具链（推荐使用 rustup 安装）
wasm-pack（用于编译 Rust 到 WebAssembly）
Node.js 和 npm（用于本地开发服务器）

安装命令如下：

# 安装 Rust$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh# 安装 wasm-pack$ cargo install wasm-pack# 安装 trunk（轻量级构建工具，推荐替代 webpack）$ cargo install trunk

创建你的第一个 Yew 应用

我们将使用 trunk 快速搭建项目：

# 创建新项目$ cargo new yew-app --lib$ cd yew-app

修改 Cargo.toml 文件，添加 Yew 依赖：

[package]name = "yew-app"version = "0.1.0"edition = "2021"[dependencies]yew = { version = "0.21", features = ["csr"] }wasm-bindgen = "0.2"[lib]crate-type = ["cdylib", "rlib"]

接着，在项目根目录创建 index.html 文件：

<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8" />  <title>My Yew App</title></head><body>  <div id="app"></div>  <script type="module">    import init from "/pkg/yew_app.js";    init();  </script></body></html>

现在编写核心逻辑。打开 src/lib.rs，输入以下代码：

use yew::prelude::*;#[function_component(App)]fn app() -> Html {    html! {        <div style="text-align: center; padding: 40px; font-family: sans-serif;">            <h2>{ "Hello, Yew!" }</h2>            <p>{ "欢迎来到 Rust 前端世界！" }</p>            <button onclick={ |_| web_sys::console::log_1(&"Button clicked!".into()) }>                { "点击我" }            </button>        </div>    }}fn main() {    yew::Renderer::<App>::new().render();}

启动开发服务器

在项目根目录运行：

$ trunk serve

然后打开浏览器访问 http://localhost:8080，你将看到一个居中的欢迎页面，点击按钮还会在控制台输出日志！

深入理解 Yew 组件

Yew 支持函数组件（如上例）和结构体组件。函数组件使用 #[function_component] 宏，简洁直观；结构体组件则适合需要内部状态管理的复杂场景。

例如，一个计数器组件可以这样写：

use yew::prelude::*;#[function_component(Counter)]fn counter() -> Html {    let counter = use_state(|| 0);    let onclick = {        let counter = counter.clone();        Callback::from(move |_| {            counter.set(*counter + 1);        })    };    html! {        <div>            <h2>{ format!("当前计数: {}", *counter) }</h2>            <button {onclick}>{ "+1" }</button>        </div>    }}