集成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