欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

企业级精致 Blazor 套件 BootstrapBlazor 介绍

发布时间：2023/12/4 68 豆豆
生活随笔 收集整理的这篇文章主要介绍了 企业级精致 Blazor 套件 BootstrapBlazor 介绍 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

BootstrapBlazor

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 创建项目

这就又回到上面面创建的项目结果了，欢迎使用，提意见建议！

总结

以上是生活随笔为你收集整理的企业级精致 Blazor 套件 BootstrapBlazor 介绍的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。