1、前言
Blazor 作为一种 Web 开发的新技术已经发展有一段时间了,有些人标称 无 JS 无 TS,我觉得有点误导新人的意味,也有人文章大肆宣传 Blazor 是 JavaScript 的终结者,是为了替代 JavaScript 而生的,我认为这些言论都太激进了太片面了。我对 Blazor 的理解是:
它仅仅是为开发人员开发 Web 应用是多了一种选择,多了一条路而已,使用 Blazor 组件可以远离 Javascript 与 css,开发 Blazor 组件还是不能彻底抛弃 Javascript 与 css。
本人在码云开源了一个后台通用权限管理平台 BootstrapAdmin(https://gitee.com/LongbowEnterprise/BootstrapAdmin),一直想把这个平台实现一个 SPA 的版本,随着 Blazor 的兴起,我个人想尝试使用 Blazor Server 端方式实现,由于一直比较喜欢 Eleme UI 的风格,于是在网上找了一下能满足需要的组件,要么是不好看,要么功能不全,比如 Table 组件展示一下数据可以,但是做到增删改查还差的很远很远。作为一个代码洁癖的人最不能接受是代码拿下来编译一下,几百个警告信息,眼泪立马流了下来。刚好 4 月份时间比较空闲,觉得利用一个月的时间自己写一套组件,由于出发点是想给 后台通用权限管理平台 BootstrapAdmin 使用,所以就叫了 BootstrapBlazor 这个名字。
经过一个月时间的打磨,本套组件库已经基本完成,从简单的 button 组件到复杂的具备增删改查功能的 table 组件都可以正常使用了,虽然名字叫做 BootstrapBlazor,其实很多组件都是借鉴的 Eleme UI 跟 Ant Design 的,基本上组件都是自己手写 css 样式进行细致调整的。
2、BootstrapBlazor 简介
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用。通过本套组件可以大大缩短开发周期,节约开发成本。目前已经开发、封装了 70 多个组件,欢迎有兴趣的同学试用。
Gitee 开源地址为:(⭐1833)
https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 开源地址为:(⭐225)
https://github.com/ArgoZhang/BootstrapBlazor
在线演示网站:
https://www.blazor.zone
主要开发仓库是 gitee 仓库,github 会自动同步。欢迎
star
⭐
首先来一波组件“阅兵”,多图预警!!!
组件70+,截图实在有点手疼,还请自己使用体验。
3、快速入门
1) 前置条件
安装 dotnet SDK
https://dotnet.microsoft.com/download
安装 Visual Studio 2019 v16.8+
https://visualstudio.microsoft.com/vs/getting-started/
2) 安装项目模板
dotnet new -i Bootstrap.Blazor.Templates::*
3) 使用方法
使用项目模板创建新项目
dotnet new bbapp
bbapp 是 BootstrapBlazor App 的缩写
一切就是这么丝滑,HFS那样的丝滑!
选中 Server
或者 WebAssembly
工程直接按 F5 运行。
剩下的时间就交给你玩玩这些组件吧,祝使用愉快!
4、结语
什么?就这?已经结束了???使用
dotnet tools
两步生成的项目,过于丝滑,显得有些 苍白,少了些动手的乐趣。
1) 现有项目中集成 BootstrapBlazor
从 Nuget.org 获取 BootstrapBlazor 包
dotnet add package BootstrapBlazor
添加样式文件与脚本到项目文件中 Pages/_Host.cshtml (Server) or wwwroot/index.html (WebAssembly)
<!DOCTYPE html>
<html lang="en">
<head>. . .<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
</head>
<body>. . .<script src="_framework/blazor.server.js"></script><script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
</body>
</html>
注册服务 ~/Startup.cs
namespace BootstrapBlazorAppName
{public class Startup{public void ConfigureServices(IServiceCollection services){//more code may be present hereservices.AddBootstrapBlazor(); }//more code may be present here}
}
5、你还需要这个
1) 安装 Visual Studio 插件
下载安装包
https://gitee.com/Longbow/BootstrapBlazorVsix/raw/master/dist/BootstrapBlazor.UITemplate-5.0.0.zip
双击 BootstrapBlazor.UITemplate.vsix 文件,请保证 Visual Studio IDE 以及相关进程均关闭,此安装包安装过程可能很慢,请耐心等待
特别注意:如果长时间无响应,请查看任务管理器中是否有
devenv.exe
或者msbuild.exe
进程,如果有请手动结束
2) 使用 VS 创建项目
这就又回到上面面创建的项目结果了,欢迎使用,提意见建议!