《进击吧！Blazor！》第一章 3.页面制作

作者介绍

陈超超
Ant Design Blazor 项目贡献者
拥有十多年从业经验，长期基于.Net技术栈进行架构与开发产品的工作，Ant Design Blazor 项目贡献者，现就职于正泰集团

写专栏开头老规矩了，所以……先来段广告
《进击吧！Blazor！》是本人与张善友老师合作的Blazor零基础入门系列视频，此系列能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。
视频地址：https://space.bilibili.com/483888821/channel/detail?cid=151273
演示代码：https://github.com/TimChen44/Blazor-ToDo
本系列文章是基于《进击吧！Blazor！》直播内容编写，升级.Net5，改进问题，讲解更全面。

从这次分享开始我通过制作一个ToDo应用来介绍Balzor的开发。

准备工作

项目准备

1. 打开上一次分享内容创建项目
   2.修改\wwwroot\css\app.css文件，只保留以下代码用于配置程序发生未捕获异常时的提示样式

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

1. 修改index.htm文件，移除对‘bootstrap’样式的引用，因为我们使用ant-design-blazor来做UI

 <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /><!--此行代码删除--> 

引入ant-design-blazor包

特性
提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 Razor 组件，可在多种托管方式共享。
支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互。
支持渐进式 Web 应用（PWA）