MASA Blazor是一个Blazor的UI组件库。就像大家写前端熟知的Bootstrap, Ant Design一样。

MASA Blazor官网地址：https://blazor.masastack.com
MASA Blazor Github地址：https://github.com/BlazorComp...
MASA Blazor Pro演示地址：https://blazor-pro.masastack....
MASA Blazor Pro Github地址：https://github.com/BlazorComp...

什么是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组件库。接下来说一下他的长处。

  1. 基于Material Design的设计格调，领有Material Design的所有设计长处，多端体验、交互、操作优良
  2. 与Blazor深度集成，让后端开发人员能十分轻松的上手。
  3. 天生具备响应式，除Vuetify有的组件外，还有许多预置组件如Url、面包屑、导航三联动，高级搜寻，i18n等
  4. 社区沉闷、繁难上手，全职团队保护

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也替咱们思考到了，所以它提供了更简略的装置形式，通过模板进行装置。

  1. 通过dotnet命令装置模板

    dotnet new --install MASA.Template

  2. 创立基于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/BlazorComp...
MASA Blazor Pro演示地址：https://blazor-pro.masastack....
MASA Blazor Pro Github地址：https://github.com/BlazorComp...

咱们正在口头，新的框架、新的生态

咱们的指标是自在的、易用的、可塑性强的、功能丰富的、强壮的。

所以咱们借鉴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技术团队成员。