项目中使用MudBlazor组件前的安装步骤

已有项目手动安装

第一步：安装

通过 NuGet 包管理器查找包或使用以下命令安装它。

dotnet add package MudBlazor

Visual Studio中操作 ：

查找包安装：

打开 【工具-NuGet 包管理器-管理解决方案的NuGet程序包】，输入MudBlazor，然后，选择包，选择项目进行下证、

命令安装：

打开 【工具-NuGet 包管理器-程序包管理控制台】，输入命令选择好项目，并按Enter键

第二步：添加导入

添加包后，您需要在 _Imports.razor 中添加以下内容

@using MudBlazor

Visual Studio中操作 ：

第三步：添加字体和样式

将以下内容添加到您的 HTML 头部部分，它是 index.html 或 _Layout.cshtml/_Host.cshtml，具体取决于您运行的是WebAssembly还是Server

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Visual Studio中操作

Server项目是添加在_Layout.cshtml文件中

第四步：添加JS

在字体和样式的同一文件中但位于其末尾添加 MudBlazor js 文件，它应该与默认 blazor 脚本位于同一位置。

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Visual Studio中操作

Server项目是添加在_Layout.cshtml文件中

第五步：删除参考

在与上面相同的文件中，默认 blazor 模板加载的引导程序，不再需要并且可以删除。site.css 文件需将其从任何内容中清除。

Visual Studio中操作

site.css 不能在_Layout.cshtml文件中引用，将引用给去掉，但css文件可以保留

第六步：注册服务

/*.NET 6 服务使用以下*/

 using MudBlazor.Services;

builder.Services.AddMudServices();

/*.NET 5 Wasm */
using MudBlazor.Services;

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("app");

    builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    builder.Services.AddMudServices();

    await builder.Build().RunAsync();
}

/*.NET 5 Server*/
using MudBlazor.Services;

public void ConfigureServices(IServiceCollection services)
{
    services.AddMudServices();
}

Visual Studio中操作

Server项目用的是.NET 6 ，打开Program.cs 文件添加。

如何出现红色波浪线表示第一步未安装成功MudBlazor。安装成功就不显示显示

第七步：添加组件

将以下组件添加到 MainLayout.razor 请注意，ThemeProvider 对于 MudBlazor 是必不可少的，但其余部分是可选的。

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

Visual Studio中操作