前言

Blazor是C#全栈追求极致开发速度的一个前后端不分离的框架，上限是在Winform,WPF,MAUI等宿主环境上面运行的全平台引用。和Electron一样，解决方案都是套壳浏览器。

为了追求极致的开发速度，Blazor急需Blazor版本的Element UI。但是我发现国内竟然有微软技术爱好者开发了这个UI框架，还是开源的。这也太厉害了吧。我对开源框架的开发者一直都是最崇高的敬意的。不说了，写完这个公司小项目就去打钱给作者。

资源

BootstrapBlazor 官方文档
BootstrapBlazor 项目模板
BoostrapBlazor 管理员和前台项目 BlazorAdmin

适合人群

快速开发
- 不需要写前后端
安全开发
- 浏览器只收到渲染结果，不怕API暴露
敏捷迭代
- 需求不确定，天天改需求。
C#全栈开发
- 前端里面不用JS,TS，就用C#写逻辑
小项目开发
- 因为是服务器发送渲染结果的方法。对于服务器的网速和负载要求比较高
- 网上说可以支持1000人同时在线。对于大部分小网站来说已经够用了。日活都不一定有1000.

如何开始

环境配置

.NET CORE 6.0 及以上
VS2022 以上
安装BootstrapBlazor项目模板

Tips:BootstrapBlazor以下简称BB

BB导入到微软默认项目模板实在太过于麻烦。不如直接使用BB提供的项目模板

开始新项目

在这里插入图片描述

Server和Wasm的区别

简单来说

Server：前后端不分离
Wasm：前端项目

这里推荐使用Server

在这里插入图片描述

.NET CORE 不支持 7.0

可能是我自己的Bug。我的电脑上面安装了.NET Core7.0
在这里插入图片描述

运行结果

在这里插入图片描述

使用组件

我们在Counter页面添加元素
在这里插入图片描述

在这里插入图片描述

@page "/counter"
@attribute [TabItemOption(Text = "Counter")]
<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>


<!--这个BB提供的Button组件，特点是用墨绿色标出和首字母大写-->
<Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}