內建Abp VNext Blazor wasm的Ant Design背景架構 TF.Abp.Blazor.Layout.AntDesignTheme

• 目的
• Demo
• 實作
• • 代碼和文檔

目的

随着微軟的.Net 5.0和Blazor Webassambly的正式釋出，也許一些應用項目也将開始探索使用這些新技術。

Abp VNext 是目前.Net領域稍微有點熱門的架構，現在Abp也推出了基于Blazor Webassambly的前端架構，但與已有的Abp VNext免費前端一樣，也是醜陋的MVC原始樣式。想要好看就得買Abp VNext的商業版，對于一些小項目來說，那價錢可也不便宜啊。

好在現在也有一些免費的Blazor Webassambly背景，比如Ant Design Pro。

但Ant Design Pro不過就是做了個前端殼子，要拿來用也得費不少勁。

是以，為此開發了一套內建Abp VNext和Ant Design的工具包，快速搭建應用背景，使開發團隊可以集中精力在業務實作上，快速開發，盡快收錢。

要推薦的是： TF.Abp.Blazor.Layout.AntDesignTheme

Demo

廢話少說，先來看樣子

瞧！頁面主題是熟悉的Abp首頁吧？

左側和上面的工具欄都是由Ant Design Pro Layout提供的。 TF.Abp.Blazor.Layout.AntDesignTheme內建了Ant Design Pro Layout的前端風格，并将Abp VNext的要素內建了進來。比如主菜單、使用者驗證、多語言等。

上圖的，右上角內建了Abp的登入驗證，點選就能調用Abp自帶的登入驗證功能，再來看一下登入以後。

左側的菜單顯示了Abp 自帶的管理子產品，隻要知道Abp是怎麼管理主菜單的，就可以維護菜單，不用關心菜單顯示組織的問題，這對于一窮二白的項目來說是省去了不少時間的。

在右上角可以看到多語言的菜單，這也是與Abp做了內建，可以直接使用Abp自帶的多語言架構，當然也可以自定義。

由于Abp預設使用Blazorise和bootstrap，他們的css與Ant Design是有沖突的，TF.Abp.Blazor.Layout.AntDesignTheme也相應的做了相容處理。

實作

要實作這樣的效果很簡單

1. 生成Abp VNext Blazor的解決方案，見Abp文檔
2. 在解決方案的Blazor項目中引用TF.Abp.Blazor.Layout.AntDesignTheme的Nuget包
3. 按照文檔提示做适當的代碼修改(cs代碼不超過10行，都是基礎的引用)

代碼和文檔

項目代碼和文檔都在Github上

https://github.com/TFInfoTech/TF.Abp.Blazor.Layout