Yew 开源项目教程

Yew 开源项目教程

yewRust / Wasm framework for creating reliable and efficient web applications项目地址:https://gitcode.com/gh_mirrors/ye/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]

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