Link to the original text ：https://blazor-university.com/component-libraries/

Component library

The component library enables us to integrate components and pages as well as any supporting files （ for example CSS file 、JavaScript And images ） Package into a reusable project .

Create a file called ClassLibraryConsumer The new Blazor Solution . Right click the solution and select Add->New Project, And then choose Razor Class Library – I'm going to call it BlazorUniversity.ClassLibrary.

This will be in the name of BlazorUniversity.ClassLibrary Create a new folder in the new folder Razor Class library , And create a new with the same name csproj file . Add the new library to the current solution , And then from ClassLibraryConsumer Reference the new library in the project .

Our new class library can now be used from any number of projects by including it in the solution and referencing it , Or you can push it to NuGet.org And as a NuGet Package usage .

Add supporting files

The default project created for us has a name wwwroot Folder . This is where we want to place any supporting documents needed by users of our library , for example JavaScript etc. .

Access the resources in the used component library

Of the component library used wwwroot The resources in the folder will be automatically published with your project . To access resources from the library used , We need to use the following URL Format .

/_content/PackageId/MyImage.png

• _content It is part of the final path of all used component library resources .

• PackageId Is a package containing binary files of resources ID. This is when you right-click the class library 、 When selecting properties and selecting the package tab, in the package ID Enter the name you see in . If you pass NuGet Installation Library , Then it is the name of the package you installed .

• MyImage.png It's from the component library wwwroot The name of any resource in the folder . Resources can be located directly in this folder , Or the path can identify resources in subfolders at any level , for example /_content/BlazorUniversity.ConsumedLibrary/scripts/HelloWorld.js

Please note that , Any component in our component library should also reference resources in the same format .

Use component library

Using the component library is very simple

• Add a project reference to the Library

perhaps ,

• Add to Library NuGet quote .

Be sure to read any comments from the library author , Because you may need to CSS and / or JavaScript Reference added to HTML.

On the client side Blazor The script used in the reference

On the client side Blazor In the application , This usually involves wwwroot/index.html File to add <script> quote .

On the server side Blazor The script used in the reference

For the server side Blazor Applications , It is added to the file /Pages/_Host.cshtml in , And it is usually quoted _framework/blazor.server.js or _framework/blazor.webassembly.js Existing <script> Add before marking