原文鏈接：https://blazor-university.com/component-libraries/

組件庫

組件庫使我們能夠將組件和頁面以及任何支持文件（例如 CSS 文件、JavaScript 和圖像）打包到一個可重用的項目中。

創建一個名為 ClassLibraryConsumer 的新 Blazor 解決方案。右鍵單擊解決方案并選擇 Add->New Project，然后選擇 Razor Class Library – 將其命名為 BlazorUniversity.ClassLibrary。

這將在名為 BlazorUniversity.ClassLibrary 的新文件夾中創建一個新的 Razor 類庫，并創建一個具有相同名稱的新 csproj 文件。將新庫添加到當前解決方案中，然后從 ClassLibraryConsumer 項目中引用新庫。

我們的新類庫現在可以通過將其包含在解決方案中并引用它來從任意數量的項目中使用，或者可以將其推送到 NuGet.org 并作為 NuGet 包使用。

添加支持文件

為我們創建的默認項目有一個名為 wwwroot 的文件夾。這是我們希望放置我們庫的使用者需要的任何支持文件的地方，例如 JavaScript 等。

訪問使用的組件庫中的資源

使用的組件庫的 wwwroot 文件夾中的資源將自動與您的項目一起發布。要從使用的庫中訪問資源，我們需要使用以下 URL 格式。

/_content/PackageId/MyImage.png

• _content 是所有使用的組件庫資源最終到達的路徑的一部分。

• PackageId 是包含資源的二進制文件的包 ID。這是您在右鍵單擊類庫、選擇屬性并選擇包選項卡時在包 ID 輸入中看到的名稱。如果您通過 NuGet 安裝庫，則它是您安裝的包的名稱。

• MyImage.png 是組件庫的 wwwroot 文件夾中任何資源的名稱。資源可以直接位于該文件夾中，或者路徑可以標識任何級別的子文件夾中的資源，例如 /_content/BlazorUniversity.ConsumedLibrary/scripts/HelloWorld.js

請注意，我們組件庫中的任何組件也應該使用相同格式引用資源。

使用組件庫

使用組件庫非常簡單

• 將項目引用添加到庫

或者，

• 添加對庫的 NuGet 引用。

確保閱讀庫作者的任何注釋，因為您可能需要將 CSS 和/或 JavaScript 引用添加到 HTML。

在客戶端 Blazor 中引用使用的腳本

在客戶端 Blazor 應用程序中，這通常涉及向我們項目的 wwwroot/index.html 文件添加 <script> 引用。

在服務器端 Blazor 中引用使用的腳本

對于服務器端 Blazor 應用程序，它被添加到文件 /Pages/_Host.cshtml 中，并且通常在引用 _framework/blazor.server.js 或 _framework/blazor.webassembly.js 的現有 <script> 標記之前添加