初識MASA Blazor

本文轉載自查看原文 2022-01-05 14:32 2725 MASA Blazor

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

MASA Blazor官網地址：https://blazor.masastack.com
MASA Blazor Github地址：https://github.com/BlazorComponent/MASA.Blazor
MASA Blazor Pro演示地址：https://blazor-pro.masastack.com/dashboards/ecommerce
MASA 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與其他前端技術的對比。或者可以直接去翻官方文檔，這里我就不過多的闡述了。

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.com
MASA Blazor Github地址：https://github.com/BlazorComponent/MASA.Blazor
MASA Blazor Pro演示地址：https://blazor-pro.masastack.com/dashboards/ecommerce
MASA Blazor Pro Github地址：https://github.com/BlazorComponent/MASA.Blazor.Pro