初识 MASA Blazor

2022 年 1 月 21 日
本文字数：3290 字
阅读完需：约 11 分钟

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 与其他前端技术的对比。或者可以直接去翻官方文档，这里我就不过多的阐述了。

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