MASA Blazor是一個Blazor的UI組件庫。就像大家寫前端熟知的Bootstrap, Ant Design一樣。

MASA Blazor官網地址：https://blazor.masastack.comMASA Blazor Github地址：https://github.com/BlazorComponent/MASA.BlazorMASA Blazor Pro演示地址：https://blazor-pro.masastack.com/dashboards/ecommerceMASA Blazor Pro Github地址：https://github.com/BlazorComponent/MASA.Blazor.Pro

什么是Blazor

在介紹MASA Blazor之前，有必要知道一下什么是Blazor，如果已經了解Blazor是什么的小伙伴可以直接跳過，往下面繼續看。

Blazor 是一個使用 .NET生成交互式客戶端 Web UI 的框架，使用Blazor，開發人員可以使用C#語言在服務器和客戶端進行編碼，構建豐富Web應用程序。聽起來是不是很不錯，不熟悉前端開發語言的后端小伙伴，也可以使用Blazor進行Web應用開發了。簡單看一下官方的描述。

如果想深入了解Blazor的小伙伴可以翻一下這篇文章，里面非常詳細的介紹了什么是Blazor和Blazor與其他前端技術的對比?；蛘呖梢灾苯尤シ俜轿臋n，這里我就不過多的闡述了。

Material Design

了解完Blazor再來簡單了解一下Material Design，為什么是Material Design，因為MASA Blazor就是基于Material Design設計的。

簡介：Material Design，中文名：材料設計語言，有人也叫它質感設計，是由Google推出的跨平臺設計語言，其旨在為手機、平板電腦、臺式機和“其他平臺”提供高度一致使用體驗和視覺效果。

優點：Material Design包含了在設計時如何使用陰影、如何使用動畫、甚至使用多少像素的邊框都給出了建議，它可以幫助我們搭建更加合理的頁面結構，如何排版、字體大小和間距，它定義了優雅流暢的交互效果引導用戶在頁面中的視覺焦點和交互操作。

Material Design的核心就是簡潔。大而簡、簡而精。它把物理世界的體驗帶進屏幕。去掉現實中的雜質和隨機性，保留其最原始純凈的形態、空間關系、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實的體驗，達到簡潔與直觀的效果。它的優點當然不止這些。海外的很多應用包括大量web網站都是基于MD的設計。在國外還是非常火的。想了解更多關于MD的小伙伴可以去翻一下它的官方網站，這里就先介紹到這。

Vuetify

Vuetify是一個在世界范圍內廣受歡迎的VueUI框架，它是建立在Vue.js之上的完備的界面框架。與其他框架不同。Vuetify從一開始就設計為易于學習的并且擁有來自 Material設計規范 的數百個精心設計組件。Vuetify采用移動優先的設計，這意味著無論是在手機、平板電腦還是臺式電腦上，你的應用程序都可以開箱即用。

所以使用vue的小伙伴可以使用Vuetify很輕松的就構建出一套基于Material Design設計風格的應用。

是不是很爽呢？說了這么多都是人家前端的東西，那我們Blazor有這樣的UI組件庫嗎？答案是當然有，那就是MASA Blazor。終于輪到了我們的主角。

MASA Blazor

MASA Blazor開篇已經說過了，他是Blazor的一個UI組件庫，Blazor使你脫離了JavaScript進行web應用開發，而MASA Blazor可以讓你不必寫，或者寫很少的Css就能構建出一個非常漂亮的web應用。MASA Blazor就是嚴格按照Material Design的設計規范精心設計的UI組件庫。接下來說一下他的優點。

基于Material Design的設計風格，擁有Material Design的所有設計優點，多端體驗、交互、操作優秀

與Blazor深度集成，讓后端開發人員能非常輕松的上手。

天生具備響應式，除Vuetify有的組件外，還有許多預置組件如Url、面包屑、導航三聯動，高級搜索，i18n等

社區活躍、簡易上手，全職團隊維護

MASA Blazor深度還原了Vuetify的所有組件，做到了1:1還原之外還增加了非常實用的預置組件，對常用的一些組件或一組組件進行封裝，更貼合開發者的日常使用，大大縮減了開發時間，增加了開發的效率。他同時也解決了大部分后端人調樣式的煩惱。幾句代碼就能快速構建出來一個漂亮的頁面。那么接下來我們就看一看如何在Blazor項目中引入它。

使用MASA Blazor

• 環境：.NET 6.0.0 + Visual Studio 2022

• 創建Blazor Server應用

  dotnet new blazorserver -o BlazorServerApp

• 添加MASA.Blazor包

  可以使用Nuget包管理工具搜索MASA.Blazor添加，也可以直接

  dotnet add package MASA.Blazor

• 在Program.cs里添加Masa Blazor相關服務。

  builder.Services.AddMasaBlazor();

  這里使用的是.net 6.0 Minimal Api沒有了Startup類。代碼看起來也比較簡潔。如果是之前的.net版本就在Startup.ConfigureServices里添加services.AddMasaBlazor();就好了。

• Pages/_Layout.cshtml 中引入樣式、字體、腳本

  在head里添加樣式和字體

  <link href="_content/MASA.Blazor/css/masa-blazor.css" rel="stylesheet"> <link href="_content/MASA.Blazor/css/masa-extend-blazor.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">

  在body的底部添加js腳本

  <script src="_content/BlazorComponent/js/blazor-component.js"></script>

  如果是.net6.0之前的版本，這些代碼是在Pages/_Host.cshtml(Server) 中

• 在_Imports.razor文件中引用MASA.Blazor，BlazorComponent明明空間，這樣我們就不用每個文件都去引用一邊了

  @using MASA.Blazor @using BlazorComponent

• 替換Shared/MainLayout.razor里面的內容

  <MApp> @Body </MApp>

使用模板快速創建Blazor項目

經過上述的步驟你就可以基于MASA Blazor進行開發了。但是步驟是不是有一點點多，些許繁雜？當然這些MASA Blazor也替我們考慮到了，所以它提供了更簡單的安裝方式，通過模板進行安裝。

通過dotnet命令安裝模板

dotnet new --install MASA.Template

創建基于MASA Blazor組件庫的Blazor Server項目

dotnet new masab -o BlazorServerApp

簡單兩步就搞定了。這樣創建完的項目就幫你完成了上述的幾個步驟。

效果展示

接下來我們就用MASA Blazor的側邊欄和頂部工具欄替換掉原來demo的組件。部分代碼截圖：

使用到了MNavigationDrawer和MAppBar兩個組件。

效果圖如下：

還有很多漂亮有趣的組件官網上都有示例和代碼，比如這個AppBar：

點擊查看源代碼，然后把代碼復制過來，一個組件就完成了。

看下效果：

就是這么簡單。

我們再來看一下官方給的Admin模板（MASA Blazor Pro）效果如何：

MASA Blazor Pro 演示了大多數MASA Blazor組件的使用。而且是一個開箱即用的后臺前端管理模板。都是開源免費的。感興趣的小伙伴可以去解一下。

MASA Blazor官網地址：https://blazor.masastack.comMASA Blazor Github地址：https://github.com/BlazorComponent/MASA.BlazorMASA Blazor Pro演示地址：https://blazor-pro.masastack.com/dashboards/ecommerceMASA Blazor Pro Github地址：https://github.com/BlazorComponent/MASA.Blazor.Pro

我們正在行動，新的框架、新的生態

我們的目標是自由的、易用的、可塑性強的、功能豐富的、健壯的。

所以我們借鑒Building blocks的設計理念，正在做一個新的框架MASA Framework，它有哪些特點呢？

• 原生支持Dapr，且允許將Dapr替換成傳統通信方式

• 架構不限，單體應用、SOA、微服務都支持

• 支持.Net原生框架，降低學習負擔，除特定領域必須引入的概念，堅持不造新輪子

• 豐富的生態支持，除了框架以外還有組件庫、權限中心、配置中心、故障排查中心、報警中心等一系列產品

• 核心代碼庫的單元測試覆蓋率90%+

• 開源、免費、社區驅動

• 還有什么？我們在等你，一起來討論

經過幾個月的生產項目實踐，已完成POC，目前正在把之前的積累重構到新的開源項目中

目前源碼已開始同步到Github（文檔站點在規劃中，會慢慢完善起來）：

MASA.BuildingBlocks

MASA.Contrib

MASA.Utils

MASA.EShop

BlazorComponent

MASA.Blazor

QQ群：7424099

微信群：加技術運營微信（MasaStackTechOps），備注來意，邀請進群

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ------ END ------

作者簡介

閻鵬舉：MASA技術團隊成員。

總結

以上是生活随笔為你收集整理的初识MASA Blazor的全部內容，希望文章能夠幫你解決所遇到的問題。

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