上一节我们创建了一个基于Blazor的Web应用，并且通过修改页面上某一处的文字大概了解了各个程序文件的作用。

这一节我们开始往里面增加内容，首先要加的就是分类树控件。上节提到过，分类树控件需要用到Ant Design的UI框架，所以我们得先要做Ant Design环境的集成。

Ant Design环境集成

我的参考资料来自Ant Design官网(注1)，鼓励有一定基础和学习能力的自行参考。对于初学者，Ant Design官方则给出了这样建议：

假设你已了解关于 HTML、CSS 和 JavaScript 的初级知识，并且已经完全掌握了 Blazor 的正确开发方式。如果你刚开始学习.NET 或者 Blazor，将 UI 框架作为你的第一步可能不是最好的主意。

我的教程目标就是针对初学者，所以如果你能够认真阅读完本节教程，我相信你可以。

环境要求

强烈建议用VS2019，如果是其他版本的VS，我也不确定是否会有这样那样的问题。

集成步骤

1、切换到程序包管理器控制台

首次使用要稍微等待一下，出现PM> 字样，就可以了。

2、安装程序包

首先键入：cd Diary.Web.Blazor.WASM，然后按回车。即进入当前项目目录。成功后不会有提示，再出一行PM>就是成功了。

然后键入：dotnet add package AntDesign，按回车。你会看到一堆的内容，只要没有暗红色的字体出现，就是正确的。同样再出一行PM>就是成功了。

这样就是安装成功了。

我们到解决方案视图的依赖项，看到包下有AntDesign，再次确认成功。

3、引入样式

在wwwroot/index.html中添加

?<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
?<script src="_content/AntDesign/js/ant-design-blazor.js"></script>

这两行语句，如下图：

如果按照官网的参考，这样，Anti Design的UI框架就算安装好了。但实际上还差两步，没有以下的步骤是没办法使用的，我继续补充。

4、引入命名空间

在_Imports.razor中增加@using AntDesign;的命名空间引用。

5、添加AntDesign服务

在Program.cs添加builder.Services.AddAntDesign();用来启动AntDesign服务。注意代码行的位置。

以上，就是集成Ant Design的全部操作，按F5如果能正常打开网站显示页面，就说明配置成功了。

接下来我们需要检验一下。

环境检验

在Index.razor下增加一个按钮

然后运行一下，我们看到这样风格的按钮，测试通过了。

以上都是准备工作。下一步我们要开始做私人笔记中的功能：界面的整体布局。

界面的整体布局

所谓的布局，最大的影响因素就是用户的操作习惯，这点Web程序与传统的WinForm程序是不同的。WinForm的用户操作习惯是顶部有菜单栏，所以功能入口都可以在菜单上堆。但是Web网站带顶部菜单的则不多见，一般都是我们看到的都是这种左侧导航，右侧内容的形式。

所以我们也需要遵从一般Web程序的用户使用习惯，把WinForm中的菜单转到左侧导航。鉴于我们这个小项目的功能比较简单，就仍然用它已经有的三个导航菜单，依次为：内容管理、系统设置、关于。当然我这里只是做教程演示，具体项目大家可以扩充。

以上导航文字在NavMenu.razor文件中修改文字即可，如下图：

内容管理页对应的就是Index.razor页面，然后我们再把Index.razor中不相关的内容都删掉。运行效果如下：

现在准备工作我们都做好了，那如何来添加分类树呢？首先我们需要参考Ant Design关于树对应的文档，通过文档可以得知，树用Tree来表示。

然后在Index.razor页面，把Ant Design官网的测试数据复制上去：

运行后的效果：

现在，树控件的内容我们可以展现出来了。只是这个数据是通过Html静态指定的，那要如何通过程序动态来添加呢？我们下一节继续。

注1：头条不允许外链，Ant Design官网的位置我一并更新到了私信回复，请通过下方私信方式获取链接。

------------------------------------

本教程项目源码已作为开源项目加入到Gitee，代码内容会随教程实时更新，大家有兴趣的话可以关注我，以获得最及时的更新。私信：

私人笔记 可以获取相关链接；

大家阅读过程中有哪些看不懂或未尽兴的地方，可以在评论区留言，我会先记下来在后续的教程中找机会再说。

教程有帮助的话请大家帮忙关注、转发、扩散，能不能开专栏还需要你们的支持！