Blazor 使用 MudBlazor 组件库不难,关键在四步:装包、注册服务、引入样式脚本、添加基础组件。只要顺序对、路径准,几分钟就能跑起来。
安装 MudBlazor NuGet 包
在项目根目录打开终端,运行命令:
dotnet add package MudBlazor如果是 .NET 6+ 项目(如 Blazor Server 或 WebAssembly),推荐用最新稳定版;也可在
.csproj中手动添加:
注册服务与配置入口
在
Program.cs(.NET 6+)中加入服务注册: builder.Services.AddMudServices();
如果是旧版 Blazor Server(.NET 5),则在
Startup.cs的
ConfigureServices方法里写:
services.AddMudServices();
引入字体、CSS 和 JS 资源
根据项目类型,在对应 HTML 文件的
中添加: Google Roboto 字体(Material Design 必需) MudBlazor 样式文件_content/MudBlazor/MudBlazor.min.cssMudBlazor 脚本文件
_content/MudBlazor/MudBlazor.min.js
例如 WebAssembly 的
wwwroot/index.html:
<script src="_content/MudBlazor/MudBlazor.min.<a%20style=" color: text-decoration:underline title="js" href="https://www.php.cn/zt/15802.html" target="_blank">js"></script>
在布局中添加核心提供器
打开
MainLayout.razor(或
App.razor),在最外层组件内添加三行:
别忘了在
_Imports.razor里加命名空间:
@using MudBlazor
基本上就这些。之后就可以直接在任何
.razor页面里写
<mudbutton></mudbutton>、
<mudtextfield></mudtextfield>这类组件了。
