當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

企业级精致 Blazor 套件 BootstrapBlazor 介绍

發布時間：2023/12/4 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了企业级精致 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 介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： C# ：异步编程的注意点
下一篇： AgileConfig-轻量级配置中心