MASA Blazor

一、什么的masa blazor

基于Material设计规范和BlazorComponent的交互能力提供标准的基础组件库。提供如布局、弹框标准、Loading、全局异常处理等标准场景的预置组件。从更多实际场景出发，满足更多用户和场景的需求，最大的减少开发者的时间成本。缩短开发周期提高开发效率。并提供一套Web解决方案示例 - MASA Blazor Pro 有多种常见场景和预设布局等精彩内容。

二、特性

  • 丰富组件：包含Vuetify 1:1还原的基础组件，以及很多实用的预置组件和.Net深度集成功能，包括Url、面包屑、导航三联动，高级搜索，i18n等
  • UI设计语言：设计风格现代，UI 多端体验设计优秀
  • 专业示例：MASA Blazor Pro 提供多种常见场景的预设布局
  • 简易上手：丰富详细的上手文档，免费的视频教程（制作中）
  • 社区活跃鼓励：用户参与实时互动，做出贡献加入我们，构建最开放的开源社区

三、安装环境——官网步骤

  • 安装Masa.Templata模版——dotnet new install Masa.Template::1.0.0-rc.1
  • 创建项目——dotnet new masablazor-server -o MasaBlazorApp
  • 启动项目——cd MasaBlazorApp——dotnet run
  • 创建Blazor Server或Blazor WebAssembly 项目——dotnet new blazorserver-empty -o BlazorApp
  • 安装nuget包——dotnet add package Masa.Blazor（在对应的项目目录下）

四、各个项目的含义

1、program.cs

1 //匹配我们的signalR的连接
2 app.MapBlazorHub();
3 //会自动的去pages/下寻找
4 app.MapFallbackToPage("/_Host");

2、_Imports.razor

全局引用

 3、app.razor

路由页面

 1 @*Blazor应用的根组件，里面通常包含Router组件用来处理Blazor中的路由 1、router组件在AppAssembly中发现可路由组件，浏览器进行导航时，如果有路由与地址匹配，
 2 
 3 Router 会拦截导航并呈现其 Found 参数的内容和提取的 RouteData，否则 Router 会呈现其 NotFound 参数。RouteView 组件负责呈现由 RouteData 指定的匹配组件及其布局（如果有）。 
 4 
 5 如果匹配组件没有布局，则使用可选择指定的 DefaultLayout。LayoutView 组件在指定布局内呈现其子内容*@
 6 
 7 <Router AppAssembly="@typeof(App).Assembly">
 8     <Found Context="routeData">
 9         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
10         <FocusOnNavigate RouteData="@routeData" Selector="h1" />
11     </Found>
12     <NotFound>
13         <PageTitle>Not found</PageTitle>
14         <LayoutView Layout="@typeof(MainLayout)">
15             <p role="alert">Sorry, there's nothing at this address.</p>
16         </LayoutView>
17     </NotFound>
18 </Router>

4、_Host.html

1  @* 根组件的主机页面 program文件里面会自动配置，启动blazor的必要条件之一。renderMode：组件呈现方式为首先预呈现，然后以交互方式呈现*@
2 
3 <component type="typeof(App)" render-mode="ServerPrerendered" />

 

posted @ 2023-06-06 09:34  末叶da  阅读(537)  评论(0)    收藏  举报