BootStrapBlazor 安裝教程–Server模式
- 2022 年 7 月 25 日
- 筆記
- BootstrapBlazor
使用模板
使用模板是最簡單的辦法。因為項目模板里已經包含了BootStrapBlazor的所有需要配置的內容。
首先我們安裝項目模板：
dotnet new -i Bootstrap.Blazor.Templates::6.4.1這裡的6.4.1是版本號，截至到目前Templates的版本號為6.4.1。
然後創建項目
dotnet new bbapp這裡的bbapp是項目名稱，你可以換成自己的項目名。
這樣一個新鮮的BB項目就建好了。
在現有模板上增加
安裝BootstrapBlazor的庫
可以使用NuGet瀏覽器，也可以使用命令
dotnet add package BootstrapBlazor --version 6.8.17來安裝。發文時的版本號為6.8.17。
添加樣式表文件
.net6默認的cshtml已經移動到了~/Pages/_Layout.cshtml文件，不是.net5的~/Pages/_Host.cshtml文件了，這裡需要注意。
<head>
...
<!-- 需引用 BootstrapBlazor.FontAwesome 包 !-->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
...
<link href="css/site.css" rel="stylesheet">
<link href="BlazorApp1.styles.css" rel="stylesheet">
</head>這裡注意一下，默認BB使用
FontAwesome作為圖標庫，同時BB也做了集成，但是集成在了一個子包裡面，需要使用NuGet安裝BootstrapBlazor.FontAwesome。
這裡還需要注意，需要刪除默認模板帶的bootstrap的css文件，否則會有css的衝突。
添加 Javascript 文件
<body>
...
<!-- 增加程式碼 !-->
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
...
<script src="_framework/blazor.server.js"></script>
</body>這裡需要注意一下，bootstrap的js一定要放在
blazor.server.js的前面，否則可能出問題。
註冊 BootstrapBlazor 服務
頂級語句：Program.cs
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddServerSideBlazor();
// 添加本行程式碼
builder.Services.AddBootstrapBlazor();
var app = builder.Build();
//more code may be present here非頂級語句：Starup.cs
namespace MyBlazorAppName
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddServerSideBlazor();
// 添加本行程式碼
services.AddBootstrapBlazor();
}
}
}增加命名空間引用
將以下內容添加到 ~/_Imports.razor 文件中，以便 Razor 文件中能識別組件
@using BootstrapBlazor.Components增加 BootstrapBlazorRoot 組件到 ~/App.razor 文件中
注意，這一步很重要，如果不做，程式在運行時大概率會報錯。
<BootstrapBlazorRoot>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<PageTitle>Title</PageTitle>
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p>正在玩命開發中 ...</p>
</LayoutView>
</NotFound>
</Router>
</BootstrapBlazorRoot>
