Create Yew App 使用教程

Create Yew App 使用教程

create-yew-appSet up a modern Yew web app by running one command. 项目地址:https://gitcode.com/gh_mirrors/cr/create-yew-app

1、项目的目录结构及介绍

Create Yew App 生成的项目目录结构如下：

my-app
├── README.md
├── .gitignore
├── Cargo.toml
├── index.html
├── LICENSE-APACHE
├── LICENSE-MIT
├── tailwind.config.js
├── tailwind.css
├── Trunk.toml
├── public
│   ├── favicon.ico
│   ├── logo.svg
└── src
    ├── lib.rs
    ├── main.rs
    ├── app
    │   ├── about.rs
    │   ├── home.rs
    │   └── mod.rs
    └── components
        ├── nav.rs
        └── mod.rs

目录结构介绍

• README.md: 项目说明文件。
• .gitignore: Git 忽略文件配置。
• Cargo.toml: Rust 项目的依赖和元数据配置文件。
• index.html: 项目的主 HTML 文件。
• LICENSE-APACHE 和 LICENSE-MIT: 项目许可证文件。
• tailwind.config.js: Tailwind CSS 配置文件。
• tailwind.css: Tailwind CSS 样式文件。
• Trunk.toml: Trunk 构建工具的配置文件。
• public: 静态资源文件夹，包含 favicon 和 logo。
• src: 源代码文件夹，包含 Rust 代码。
  • lib.rs: 库模块文件。
  • main.rs: 主程序入口文件。
  • app: 应用模块文件夹，包含 about 和 home 页面。
  • components: 组件模块文件夹，包含导航组件。

2、项目的启动文件介绍

项目的启动文件是 src/main.rs，它是 Rust 程序的入口点。以下是 main.rs 的基本结构：

fn main() {
    yew::start_app::<app::App>();
}

启动文件介绍

• main 函数: 程序的入口点，调用 yew::start_app 启动 Yew 应用。
• app::App: 应用的主组件，定义在 src/app/mod.rs 中。

3、项目的配置文件介绍

项目中有几个重要的配置文件：

Cargo.toml

Cargo.toml 是 Rust 项目的依赖和元数据配置文件，包含项目名称、版本、依赖等信息。

[package]
name = "my-app"
version = "0.1.0"
edition = "2018"

[dependencies]
yew = "0.18"

Trunk.toml

Trunk.toml 是 Trunk 构建工具的配置文件，用于配置构建和开发服务器。

[build]
target = "index.html"

[dev]
open = true

tailwind.config.js

tailwind.config.js 是 Tailwind CSS 的配置文件，用于自定义 Tailwind 的配置。

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

以上是 Create Yew App 项目的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。

create-yew-appSet up a modern Yew web app by running one command. 项目地址:https://gitcode.com/gh_mirrors/cr/create-yew-app