Yew 开源项目教程
1. 项目的目录结构及介绍
Yew 项目的目录结构如下:
yew/
├── Cargo.toml
├── crates/
│ ├── yew/
│ ├── yew-macro/
│ ├── yew-router/
│ ├── yew-stdweb/
│ ├── yew-web/
│ └── yew-web-sys/
├── examples/
│ ├── counter/
│ ├── custom_components/
│ ├── hello_world/
│ ├── multi_thread/
│ ├── router/
│ ├── spa/
│ └── todo_mvc/
├── src/
│ ├── lib.rs
│ ├── html.rs
│ ├── virtual_dom.rs
│ └── components/
├── target/
└── tests/
目录结构介绍
Cargo.toml
: 项目的依赖管理文件,包含了项目的元数据和依赖库。crates/
: 包含了 Yew 的核心库和相关子库。yew/
: Yew 的核心库。yew-macro/
: Yew 的宏库,用于生成组件代码。yew-router/
: Yew 的路由库。yew-stdweb/
: 与stdweb
集成的库。yew-web/
: 与web-sys
集成的库。yew-web-sys/
: 与web-sys
集成的库。
examples/
: 包含了多个示例项目,展示了 Yew 的不同用法。src/
: 包含了 Yew 的核心代码。lib.rs
: 主库文件。html.rs
: 用于处理 HTML 的模块。virtual_dom.rs
: 虚拟 DOM 的实现。components/
: 包含了各种组件的实现。
target/
: 编译生成的目标文件。tests/
: 测试代码。
2. 项目的启动文件介绍
Yew 项目的启动文件通常位于 examples/
目录下的某个示例项目中。以 examples/hello_world
为例,启动文件为 main.rs
。
// examples/hello_world/src/main.rs
use yew::prelude::*;
struct Model {
link: ComponentLink<Self>,
}
impl Component for Model {
type Message = ();
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
Model { link }
}
fn update(&mut self, _msg: Self::Message) -> ShouldRender {
true
}
fn view(&self) -> Html {
html! {
<div>
<h1>{ "Hello World" }</h1>
</div>
}
}
}
fn main() {
yew::start_app::<Model>();
}
启动文件介绍
main.rs
: 主程序文件,定义了一个简单的 Yew 组件Model
,并在main
函数中调用yew::start_app::<Model>()
启动应用。
3. 项目的配置文件介绍
Yew 项目的配置文件主要是 Cargo.toml
,它包含了项目的元数据和依赖库。
# Cargo.toml
[package]
name = "yew"
version = "0.18.0"
authors = ["The Yew Project Developers"]
edition = "2018"
[dependencies]
yew = { path = "crates/yew" }
yew-macro = { path = "crates/yew-macro" }
yew-router = { path = "crates/yew-router" }
yew-stdweb = { path = "crates/yew-stdweb" }
yew-web = { path = "crates/yew-web" }
yew-web-sys = { path = "crates/yew-web-sys" }
[dev-dependencies]
wasm-bindgen-test = "0.3.13"
[lib]