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

风丽同学_2223

风丽同学_2223

2025-12-14

950人浏览

原创

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

blazor 怎么将 razor class library (rcl) 用作组件库

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.razorCard.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,然后直接写 <alert message="Hello"></alert>

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

Miller CSV TSV JSON 数据处理器
Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具,用于查询、整形和重新格式化名称索引数据,如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

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

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

  • 把图标、SVG、自定义字体放入 RCL 的 wwwroot/,比如 wwwroot/css/theme.css
  • 在主项目的 index.html(WASM)或 _Host.cshtml(Server)中手动引入:<link href="_content/MyComponentLib/css/theme.css" rel="stylesheet">
  • 图片引用示例:<img src="_content/MyComponentLib/logo.png">

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

发布与 NuGet(进阶)

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

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

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

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

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

css html js microsoft 作用域

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2023.10.19

3028

3

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

2025.10.17

4169

12

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.29

3649

9

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2026.01.19

346

15

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

2024.01.03

3056

7

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

2025.12.06

286

9

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

3696

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1175

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1518

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.5万人学习

CSS教程
CSS教程

共754课时 | 93.1万人学习