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
ブレザーとは？
MASA Blazorを紹介する前に、Blazorが何であるかを知る必要があります。すでにBlazorが何であるかを知っている人はスキップして下を見てください。
Blazorは、. NETを使用してインタラクティブなクライアントサイドのWeb UIを生成するフレームワークで、開発者はC#言語を使用してサーバーとクライアントサイドの両方でコーディングし、リッチなWebアプリケーションを構築できます。フロントエンド開発言語に精通していないバックエンドの小さなパートナーでも、Blazorを使用してWebアプリケーションを開発することができます。公式の説明を見てください。
如果想深入了解 Blazor 的小伙伴可以翻一下这篇文章，里面非常详细的介绍了什么是 Blazor 和 Blazor 与其他前端技术的对比。或者可以直接去翻官方文档，这里我就不过多的阐述了。
Material Design
MASA Blazorはマテリアルデザインに基づいているため、Material Designとなぜマテリアルデザインなのかを簡単に理解してください。
Material Design（マテリアルデザイン言語）は、Googleが立ち上げたクロスプラットフォームデザイン言語で、モバイル、タブレット、デスクトップ、その他のプラットフォームに対して一貫性の高いエクスペリエンスとビジュアルを提供することを目的としています。
** 利点：** マテリアルデザインには、デザイン中に影を使用する方法、アニメーションを使用する方法、さらには境界線のピクセル数が含まれており、より合理的なページ構造、タイポグラフィ、フォントサイズ、間隔を構築するのに役立ちます。エレガントで流動的なインタラクティブ効果を定義し、ページ内の視覚的な焦点とインタラクションでユーザーを導く。
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はJava ScriptからWebアプリケーション開発を可能にし、MASA BlazorはCSSを書かずに、またはほとんど書かずに美しいWebアプリケーションを構築することができます。MASA Blazorは、Material Designの設計仕様に厳密に準拠して設計されたUIコンポーネントライブラリです。彼の利点を教えてください。
- マテリアルデザインのデザインスタイルに基づいて、マテリアルデザインのすべてのデザインの利点、マルチエンド体験、インタラクション、優れた操作を持っています。
- Blazorとの深い統合により、バックエンド開発者は非常に簡単に作業できます。
- Vuetifyのいくつかのコンポーネントに加えて、Url、ブレッドクラム、ナビゲーション3リンケージ、高度な検索、i 18 nなどの多くのプリセットコンポーネントがあります
- アクティブなコミュニティ、簡単なハンズオン、フルタイムのチームメンテナンス
MASA BlazorはVuetifyのすべてのコンポーネントを深く復元し、1 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にはスタートアップクラスがない。コードもかなりシンプルに見えます。以前のバージョンの. netの場合は、service.AddMasaBlazor;をStartup.ConfigureServicesに追加してください。
- /
ヘッドにスタイルとフォントを追加する
<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"
/>
本文の下部にJSスクリプトを追加する
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
net6.0より前のリリースの、これらのコードは/_Host.cschtml 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
2つの簡単なステップで完了します。作成されたプロジェクトは、上記のステップのいくつかを完了するのに役立ちます。
効果の表示
次に、元のデモコンポーネントをMASA Blazorのサイドバーと上部ツールバーに置き換えます。一部コードのスクリーンショット：
MNavigationDrawerとMAppBarの2つのコンポーネントが使用されます。
効果は以下のとおり。
このAppBarのように、ウェブサイトにはサンプルやコードがある美しく興味深いコンポーネントもたくさんあります。
ソースコードを参照し、コードをコピーすると、コンポーネントが完成します。
効果を見る：
それは簡単です。
公式の管理テンプレート（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
私たちは行動しています新しい枠組み新しいエコロジー
我们的目标是自由的、易用的、可塑性强的、功能丰富的、健壮的。
所以我们借鉴 Building blocks 的设计理念，正在做一个新的框架MASA Framework，它有哪些特点呢？
- Daprをネイティブにサポートし、従来の通信方法に置き換えることができます。
- アーキテクチャに制限がなく、単一アプリケーション、SOA、マイクロサービスをサポートします。
- Netネイティブフレームワークのサポートにより、学習負荷を軽減し、特定の分野で導入する必要がある概念を除き、新しい車輪を作らないことを主張する。
- フレームワークに加えて、コンポーネントライブラリ、権限センター、構成センター、トラブルシューティングセンター、アラームセンターなどの一連の製品があります。
- コアコードベースの単体テストカバレッジ90%以上
- オープンソース、無料、コミュニティ主導
- 他には？私たちはあなたを待っています。
数ヶ月のプロダクションプロジェクトの後、POCが完了し、以前の蓄積を新しいオープンソースプロジェクトに再構築しています。
現在、ソースコードはGitHubに同期され始めています（計画中のドキュメントサイトは、徐々に改善されます）：
** 技術交流 ***
- QQ 群：7424099
- 微信グループ：プラス技術運営微信（MasaStackTechOps）、意図的なメモ、グループへの招待
------ END ------
** 著者のプロフィール **
- Yan：MASA技術チームのメンバー。