Blazor 怎么将 Razor Class Library (RCL) 用作组件库

Blazor中RCL作为组件库的核心是隔离、正确引用和静态资源处理：创建无宿主依赖的Razor组件，通过项目引用并在\_Imports.razor中导入命名空间；静态资源放入RCL的wwwroot，构建时自动复制至\_content/{RCLName}/路径。

Blazor 中将 Razor Class Library（RCL）用作组件库，核心是：创建可复用的、无宿主依赖的 Razor 组件，并在主项目中正确引用和使用。关键不在于“打包”，而在于“隔离 + 正确引用 + 静态资源处理”。

创建 RCL 并组织组件

在解决方案中新建 Razor Class Library 项目（.NET 6+ 推荐选“支持 ASP.NET Core Shared Framework”）。默认会包含 _Imports.razor，可在此统一导入常用命名空间（如 @using Microsoft.AspNetCore.Components.Web），方便下游直接使用组件而无需重复 @using。

把自定义组件（`.razor` 文件）放在 `Components/` 目录下（非必须，但推荐），例如：Alert.razor、Card.razor。避免在 RCL 中依赖 `Program.cs` 或 `App.razor` 等宿主特有逻辑——它只提供 UI 块，不启动应用。

• 组件内若用到 CSS 或 JS，建议用 Scoped CSS（.razor.css），自动作用域隔离，避免样式污染
• 如需全局 JS，不要在 RCL 中调用 IJSRuntime 初始化；留待主项目按需注入或加载
• 若组件需参数，用 [Parameter] 显式声明，保持接口清晰

在 Blazor WebAssembly 或 Server 项目中引用 RCL

右键主项目 → “添加项目引用” → 选中你的 RCL 项目。或者用 CLI：dotnet add reference ../MyComponentLib/MyComponentLib.csproj。

引用后，RCL 中的组件不会自动全局可用。有两种常用方式启用：

• 在主项目的 _Imports.razor 中添加：@using MyComponentLib.Components（假设组件在该命名空间）
• 在具体页面或布局中局部使用：@using MyComponentLib.Components，然后直接写

注意：RCL 的程序集会被自动发布到输出目录（WebAssembly 的 _framework 或 Server 的 bin/.../refs），无需额外配置。

处理静态资源（图标、字体、CSS 全局样式）

RCL 可以带 wwwroot/ 文件夹，其中内容会在构建时被复制到主项目的对应路径下（如 wwwroot/_content/{RCLName}/）。

• 把图标、SVG、自定义字体放入 RCL 的 wwwroot/，比如 wwwroot/css/theme.css
• 在主项目的 index.html（WASM）或 _Host.cshtml（Server）中手动引入：
• 图片引用示例：

这是 RCL 分发样式与资源的标准机制，也是为什么不能直接用相对路径（如 ./css/...）的原因。

发布与 NuGet（进阶）

如果组件库要跨多个解决方案复用，可打包为 NuGet 包：

• 在 RCL 的 `.csproj` 中设置：DotNetTool 改为 Library（默认就是）
• 添加 true，并设置 MyComponentLib 等元数据
• 执行 dotnet pack，生成 `.nupkg`，推送到私有源或 nuget.org
• 主项目用 dotnet add package MyComponentLib 引入，其余用法完全一致

此时静态资源仍走 _content/{PackageId}/... 路径，机制不变。

基本上就这些。RCL 本质是“编译时引用 + 构建时资源合并”的轻量分发方案，不复杂但容易忽略静态资源路径规则和命名空间导入。用好它，组件就能真正实现一次开发、多项目复用。