如何在Yew中导入组件？main.rs导入App组件遇问题

核心问题分析 #

你遇到的两个报错对应不同的模块导入逻辑问题：

1. use <name_of_app>::App;报错：App组件所在的子模块未被引入当前作用域，或是你误将crate名直接用于引用内部子模块的组件。
2. mod App;提示重复定义：一是模块名不符合Rust规范（Rust约定模块用蛇形小写命名），二是该写法会让编译器尝试寻找同名文件（App.rs或App/mod.rs），若文件不存在或内部已有同名结构体，就会触发冲突。

标准解决方案（基于常规Yew项目结构） #

假设你的项目是最常见的单bin结构：

src/
├── main.rs
└── app.rs  # App组件定义在此文件中

修改main.rs如下：

// 声明子模块，告知编译器加载同目录下的app.rs文件
mod app;
// 从app模块中导入App组件
use app::App;

fn main() {
    yew::Renderer::<App>::new().render();
}

拆分结构场景的处理方式 #

如果项目采用lib+bin拆分结构（App组件定义在src/lib.rs中）：

1. 确保Cargo.toml同时配置lib和bin：

[package]
name = "your_crate_name"
version = "0.1.0"

[[bin]]
name = "your_app"
path = "src/main.rs"

[lib]
path = "src/lib.rs"

2. 在src/lib.rs中导出App组件：

use yew::prelude::*;

#[function_component(App)]
pub fn app() -> Html {
    html! { /* 组件内容 */ }
}

3. 此时main.rs可直接通过crate名导入：

use your_crate_name::App;

fn main() {
    yew::Renderer::<App>::new().render();
}

关键注意事项 #

• 严格遵循Rust命名规范：模块名用蛇形小写（如app），组件/结构体用大驼峰（如App），避免名称混淆。
• 导入内部模块组件前，必须先用mod声明模块，或使用绝对路径crate::app::App引用。
• 注意文件大小写：Rust对文件名大小写敏感，mod app;对应app.rs，若文件名是App.rs会导致编译器找不到模块。

内容的提问来源于stack exchange，提问作者Daniel