企业级精致 Blazor 套件 BootstrapBlazor 介绍
1、前言
Blazor 作為一種 Web 開發(fā)的新技術(shù)已經(jīng)發(fā)展有一段時間了，有些人標(biāo)稱 無 JS 無 TS，我覺得有點誤導(dǎo)新人的意味，也有人文章大肆宣傳 Blazor 是 JavaScript 的終結(jié)者，是為了替代 JavaScript 而生的，我認(rèn)為這些言論都太激進(jìn)了太片面了。我對 Blazor 的理解是：
它僅僅是為開發(fā)人員開發(fā) Web 應(yīng)用是多了一種選擇，多了一條路而已，使用 Blazor 組件可以遠(yuǎn)離 Javascript 與 css，開發(fā) Blazor 組件還是不能徹底拋棄 Javascript 與 css。
本人在碼云開源了一個后臺通用權(quán)限管理平臺 BootstrapAdmin（https://gitee.com/LongbowEnterprise/BootstrapAdmin），一直想把這個平臺實現(xiàn)一個 SPA 的版本，隨著 Blazor 的興起，我個人想嘗試使用 Blazor Server 端方式實現(xiàn)，由于一直比較喜歡 Eleme UI 的風(fēng)格，于是在網(wǎng)上找了一下能滿足需要的組件，要么是不好看，要么功能不全，比如 Table 組件展示一下數(shù)據(jù)可以，但是做到增刪改查還差的很遠(yuǎn)很遠(yuǎn)。作為一個代碼潔癖的人最不能接受是代碼拿下來編譯一下，幾百個警告信息，眼淚立馬流了下來。剛好 4 月份時間比較空閑，覺得利用一個月的時間自己寫一套組件，由于出發(fā)點是想給 后臺通用權(quán)限管理平臺 BootstrapAdmin 使用，所以就叫了 BootstrapBlazor 這個名字。
經(jīng)過一個月時間的打磨，本套組件庫已經(jīng)基本完成，從簡單的 button 組件到復(fù)雜的具備增刪改查功能的 table 組件都可以正常使用了，雖然名字叫做 BootstrapBlazor，其實很多組件都是借鑒的 Eleme UI 跟 Ant Design 的，基本上組件都是自己手寫 css 樣式進(jìn)行細(xì)致調(diào)整的。
2、BootstrapBlazor 簡介
Bootstrap Blazor 是一套企業(yè)級 UI 組件庫，適配移動端支持各種主流瀏覽器，已經(jīng)在多個交付項目中使用。通過本套組件可以大大縮短開發(fā)周期，節(jié)約開發(fā)成本。目前已經(jīng)開發(fā)、封裝了 70 多個組件，歡迎有興趣的同學(xué)試用。
Gitee 開源地址為：(?1833)
https://gitee.com/LongbowEnterprise/BootstrapBlazorGithub 開源地址為：(?225)
https://github.com/ArgoZhang/BootstrapBlazor在線演示網(wǎng)站：
https://www.blazor.zone主要開發(fā)倉庫是 gitee 倉庫，github 會自動同步。歡迎 star ?
首先來一波組件“閱兵”，多圖預(yù)警！！！
組件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) 使用方法
使用項目模板創(chuàng)建新項目
dotnet?new?bbappbbapp 是 BootstrapBlazor App 的縮寫
一切就是這么絲滑，HFS那樣的絲滑！
生成的項目文件雙擊打開解決方案選中 Server 或者 WebAssembly 工程直接按 F5 運行。
剩下的時間就交給你玩玩這些組件吧，祝使用愉快！
4、結(jié)語
什么？就這？已經(jīng)結(jié)束了？？？使用 dotnet tools 兩步生成的項目，過于絲滑，顯得有些 蒼白，少了些動手的樂趣。
1) 現(xiàn)有項目中集成 BootstrapBlazor
從 Nuget.org 獲取 BootstrapBlazor 包
添加樣式文件與腳本到項目文件中 Pages/_Host.cshtml (Server) or wwwroot/index.html (WebAssembly)
注冊服務(wù) ~/Startup.cs
5、你還需要這個
1) 安裝 Visual Studio 插件
下載安裝包
https://gitee.com/Longbow/BootstrapBlazorVsix/raw/master/dist/BootstrapBlazor.UITemplate-5.0.0.zip雙擊 BootstrapBlazor.UITemplate.vsix 文件，請保證 Visual Studio IDE 以及相關(guān)進(jìn)程均關(guān)閉，此安裝包安裝過程可能很慢，請耐心等待
特別注意：如果長時間無響應(yīng)，請查看任務(wù)管理器中是否有 devenv.exe 或者 msbuild.exe 進(jìn)程，如果有請手動結(jié)束
2) 使用 VS 創(chuàng)建項目
這就又回到上面面創(chuàng)建的項目結(jié)果了，歡迎使用，提意見建議！
總結(jié)
以上是生活随笔為你收集整理的企业级精致 Blazor 套件 BootstrapBlazor 介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# ：异步编程的注意点
- 下一篇： AgileConfig-轻量级配置中心