组件库使我们能够将组件和页面以及任何支持文件(如CSS文件、JavaScript和图像)打包到单个可重用项目中。
创建一个名为ClassLibraryConsumer的新Blazor解决方案。右键单击解决方案并选择Add->New Project，然后选择Razor Class Library-将其命名为BlazorUniversity.ClassLibrary。
这将在名为BlazorUniversity.ClassLibrary的新文件夹中创建一个新的Razor类库，并创建一个同名的新csproj文件。将新库添加到当前解决方案中，然后从ClassLibraryConsumer项目引用新库。
我们的新类库现在可以从任何数量的项目中使用，方法是将其包含在解决方案中并引用它，或者将其推送到NuGet.org并作为NuGet包使用。

Adding supporting files

为我们创建的默认项目有一个名为wwwroot的文件夹。这是我们期望放置库使用者所需的任何支持文件的位置，例如JavaScript等。

Accessing resources in a consumed component library 访问使用的组件库中的资源

使用的组件库的wwwroot文件夹中的资源将与您的项目一起自动发布。要访问使用的库中的资源，我们需要使用以下URL格式。
/_content/PackageId/MyImage.png

  • _content是路径的一部分，所有使用的组件库资源都在该路径结束。
  • PackageId是包含资源的二进制文件的包ID。这是当您右键单击类库，选择Properties，然后选择Package选项卡时，您在Package id输入中看到的名称。如果通过NuGet安装库，则它是您安装的软件包的名称。
  • MyImage.png是组件库的wwwroot文件夹中任何资源的名称。资源可以直接位于该文件夹中，或者路径可以标识任何级别的子文件夹中的资源，例如/_content/BlazorUniversity.ConsumedLibrary/scripts/HelloWorld.js

请注意，我们的组件库中的任何组件也应该使用相同的格式引用资源。

Consuming a component library 使用组件库

使用组件库就像使用这两种方法中的任何一种一样简单

  • 将项目引用添加到库中

或，

  • 将NuGet引用添加到库中。

请务必阅读来自库作者的任何注释，因为其中可能涉及一些JavaScript初始化。例如，Blazor-Flosor 需要执行一些JavaScript来初始化库。

Referencing consumed scripts in Client-side Blazor 在客户端Blazor中引用使用的脚本

在客户端Blazor应用程序中，这通常涉及向项目的wwwroot/index.html文件添加<script>引用。

Referencing consumed scripts in Server-side Blazor 引用服务器端Blazor中使用的脚本

对于服务器端Blazor应用程序，它被添加到文件/Pages/_Host.cshtml中，并且通常添加在引用_framework/blazor.server.js或_framework/blazor.webassembly.js的现有<script>标记之前。