企业官网建设流程全解析

• 前端
• UI组件
• 设计系统

Ant Design Blazor 是一套遵循 Ant Design 设计规范、使用 C# 构建的 Blazor 企业级组件库，它把 Ant Design 的交互语言与视觉风格原样带入 .NET 生态，让 .NET 开发者无需编写 JavaScript 即可搭建富交互界面。本文以仓库官方文档 docs/introduce.en-US.md 为主体，结合组件库源码（components 目录）与配套文档（docs/getting-started.en-US.md），系统讲解该库的核心特性、运行环境、设计规范同步机制，以及从空项目到跑通第一个组件的完整安装流程。读完本文，你将掌握通过dotnet new模板脚手架和向既有项目引入 NuGet 包两种方式接入 Ant Design Blazor，并能正确配置服务注册、AntContainer与样式脚本加载。

项目定位：遵循 Ant Design 规范的 Blazor 组件库

Ant Design Blazor（即ant-design-blazor）的定位非常明确：遵循 Ant Design 设计规范，为 Blazor 开发者提供一套开箱即用、高质量的企业级 UI 组件与配套 Demo，用于构建丰富、可交互的用户界面。与 React 版 Ant Design 不同，它完全基于 C# 与 Razor 组件实现，开发者可以用纯 .NET 技术栈完成从业务逻辑到界面呈现的全部工作。

从仓库结构可以看到其能力边界：components/目录下按模块组织着 Button、Form、Table、Tree、DatePicker、Modal、Notification 等几十个组件，每个组件目录内都包含.razor模板、.razor.cs代码后置与style/下的 Less 样式文件；核心基础设施（DI 注册、JS 互操作、事件监听等）则沉淀在 components/core 中。components/AntDesign.csproj将整个组件库打包为名为AntDesign的 NuGet 包，这就是后续安装命令中的包名来源。

核心特性一览

官方文档将组件库的核心能力归纳为七项，全部可以在仓库中得到印证：

• 🌈 企业级 UI 交互语言与视觉风格：组件样式直接移植自 Ant Design，色彩、间距、动效均遵循同一套设计体系，相关 Less 源文件位于 components/style（含 default.less、dark.less、compact.less 等主题入口）。
• 📦 开箱即用的高质量 Blazor 组件集合：覆盖布局、导航、数据录入、数据展示、反馈等全部常用场景，见 components 下的各组件模块。
• 💕 同时支持 WebAssembly 客户端渲染与基于 SignalR 的 Server 端 UI 事件交互：组件库对两种 Blazor 托管模型透明兼容。
• 🎨 支持渐进式 Web 应用（PWA）：组件不依赖服务端特定能力，可随 WebAssembly 静态文件部署到任意静态站点。
• 🛡 使用 C# 构建：C# 是一门多范式静态语言，类型安全与编译期检查带来高效的开发体验。
• 🌍 数十种语言的国际化支持：仓库内置了 60 余个语言包 JSON 文件（components/locales，含 en-US、zh-CN、ja-JP、de-DE 等），并通过LocaleProvider静态类按线程提供语言包，详见 docs/i18n.en-US.md。
• 🎁 与既有 ASP.NET Core MVC 和 Razor Pages 项目无缝集成：组件以 Blazor 可复用组件形式存在，可嵌入既有服务端渲染页面中。

在线示例：WebAssembly 静态托管

官方提供了两个以 WebAssembly 静态托管方式部署的在线站点，可直接体验组件效果与完整应用形态：

• 文档站点 antblazor.com：组件文档与在线 Demo。
• 企业系统后台 pro.antblazor.com：基于组件库搭建的完整后台管理系统示例。

这类静态部署能力意味着组件库产出的应用可以托管在任意支持静态文件的 CDN 或 Web 服务器上，无需专门的 .NET 运行时。

运行环境与浏览器支持

官方文档明确了以下支持范围：

• .NET 版本：支持 .NET Core 3.1 / .NET 5 / .NET 6 / .NET 7 / .NET 8 / .NET 9。作为佐证，components/AntDesign.csproj 中的<TargetFrameworks>实际列出了netstandard2.1;net5.0;net6.0;net7.0;net8.0;net9.0;net10.0共七档目标框架，可见库本身对版本兼容的覆盖面比文档列举的更广，其中netstandard2.1用于覆盖更老的基础设施。
• 部署形态：支持 WebAssembly 静态文件部署。
• 浏览器：支持四大主流浏览器内核；Blazor Server 场景下额外支持 Internet Explorer 11+。需要特别说明两点限制：
  • 由于 WebAssembly 本身的技术限制，Blazor WebAssembly 不支持 IE 浏览器；Blazor Server 可通过附加 polyfill 支持 IE 11。
  • 自 .NET 5 起，IE 11 不再被官方支持（社区方案 Blazor.Polyfill 可提供非官方支持）。
• 跨平台前端框架：支持 .NET MAUI、WPF、Windows Forms 等 Blazor Hybrid 工作负载，也支持 Electron 及其他基于 Web 标准的运行环境。

版本发布渠道

组件库提供两条发布渠道，均可从包管理器直接获取：

• Release 正式版：以AntDesign为包名发布到 NuGet，对应命令dotnet add package AntDesign默认拉取的就是正式版。
• Nightly 每日构建版：通过 MyGet 上的 ant-design-blazor 订阅源（feed）发布预发布版本，适合希望提前体验新功能的用户。

设计规范同步策略

Ant Design Blazor 会定期与官方 Ant Design 设计规范保持同步，这意味着 Ant Design 生态中成熟的自定义主题样式也可以直接迁移使用。仓库中的 components/style 保留了 antd 4.x 的完整样式体系（themes/、mixins/、color/等目录），并且根目录还提供 ant-design-blazor.dark.less、ant-design-blazor.compact.less、ant-design-blazor.variable.less 等独立主题入口。需要特别留意官方文档中的约定：在 1.0 正式版发布之前，仅同步 antd 4.x 的样式。主题定制方案可参考 docs/customize-theme.en-US.md。

安装与快速开始

官方文档提供了两条安装路径：用官方模板一键生成脚手架项目，或把组件库引入既有项目。

前置要求

安装 .NET Core SDK3.1.300 或更高版本（文档建议使用 .NET 8，体验更佳）。所有 .NET CLI 操作（创建项目、添加包、构建）都依赖该 SDK。

方式一：使用 dotnet new 模板（AntDesign.Templates）

AntDesign.Templates是官方提供的项目模板包，可一键生成一个包含完整布局与示例页面的 Boilerplate 工程（即 Ant Design Pro 风格模板）。

安装模板：

$ dotnet new --install AntDesign.Templates

使用模板创建项目：

$ dotnet new antdesign -o MyAntDesignApp

模板支持以下命令行选项：

其中--host的三个取值分别对应 .NET 8+ 的 Blazor Web App（webapp）、Blazor WebAssembly（wasm）与 Blazor Server（server）；选择less意味着你打算深度定制主题，此时模板会配置 Less 编译管线，需要本地具备 Node.js 环境。

方式二：将 Ant Design Blazor 引入既有项目

无论既有项目是 Blazor WebAssembly、Blazor Server 还是 MVC/Razor Pages，都可以按以下四个步骤接入。

第一步：添加 NuGet 包引用。在项目目录下执行：

$ dotnet add package AntDesign

第二步：注册服务。在Program.cs中调用：

builder.Services.AddAntDesign();

或在Startup.cs中调用：

services.AddAntDesign();

这一步是组件库正常工作的前提。从源码 components/core/Extensions/ServiceCollectionExtensions.cs 可以看到AddAntDesign()实际注册的内容：

• 单例服务：IComponentIdGenerator（组件 ID 生成）、IFieldFilterTypeResolver（表格筛选字段类型解析）、IDraftService（草稿服务）；
• Scoped 服务：DomEventService（DOM 事件监听）、HtmlRenderService、IconService、InteropService、ClientDimensionService、ConfigService等；
• 弹层服务族：NotificationService、MessageService、ConfirmService、ModalService、DrawerService、ImageService、ReuseTabsService、MenuService。

一个值得关注的实现细节：源码通过RuntimeInformation.IsOSPlatform(OSPlatform.Create("BROWSER"))检测是否运行在 WebAssembly 环境，并据此决定弹层服务的生命周期——WebAssembly 下注册为 Singleton，Server 下注册为 Scoped，这正是文档中“支持 WebAssembly 客户端与 SignalR 服务端两种交互模型”在源码层面的落点。

第三步：在_Imports.razor中引入命名空间：

@using AntDesign

添加后即可在所有.razor文件中直接使用组件，无需逐个文件写@using。

第四步：添加<AntContainer />组件。这是动态弹层组件（Notification、Message、Modal、Drawer 等）得以显示的关键——它们依赖一个常驻的挂载容器来承载动态渲染的内容。AntContainer的实现位于 components/core/Base/AntContainerComponentBase.cs，其BuildRenderTree会渲染一个带 ID 与样式类的容器元素，弹层服务将渲染树挂载其中。

针对不同托管模型的添加方式略有差异：

• Blazor WebApp（.NET 8+）：需要为<Routes />与<AntContainer />同时指定交互渲染模式：

  <Routes @rendermode="RenderMode.InteractiveAuto" /> <-- specify the rendermode ✨ + <AntContainer @rendermode="RenderMode.InteractiveAuto" /> <-- add this component ✨

• 传统 Blazor 应用（Server / WebAssembly）：在App.razor的 Router 之后追加一行：

  <Router AppAssembly="@typeof(MainLayout).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <Result Status="404" /> </LayoutView> </NotFound> </Router> <AntContainer /> <-- add this component ✨

遗漏AntContainer是最常见的“弹层不显示”原因。组件库自身的 XML 文档也对此给出了明确提醒——在 components/notification/Notification.razor.cs 的注释中写着：“请确认App.Razor中已添加<AntContainer />组件，如果通知无法显示，这通常是问题所在。”

补充：样式与脚本的引入。从 0.17.0 版本起，组件库通过 Blazor 的 JavaScript Initializers 机制支持样式与脚本自动导入：CSS 默认注入到页面首个<link>之前，JS 默认注入到所有<script>之前。若需指定注入位置，可在目标位置放置<link antblazor-css>或<script antblazor-js></script>锚点元素；若想彻底关闭自动导入，可在任意 HTML 元素上使用no-antblazor-js与no-antblazor-css属性并手动引入：

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

注意：静态（Static）与自动（Auto）渲染模式下暂不支持自动导入，需要手动引入。更完整的初始化流程可参考 docs/getting-started.en-US.md。

使用第一个组件

完成上述配置后，就可以在任何.razor组件中书写界面了：

<Button Type="ButtonType.Primary">Hello World!</Button>

以 Button.razor 为例，其渲染逻辑会在按钮内部按需呈现加载图标（Loading状态）、前缀图标（Icon/IconFont）与文本内容，并挂接点击、水波纹等交互，最终输出带ant-btn系列类名的原生<button>元素——这正是一行声明式标记背后完整机制的一个缩影。

本地开发与构建

使用 Gitpod 在线开发

官方提供 Gitpod 一键工作区，点击即可免费启动一个预配置的开发环境，适合快速体验源码或进行轻量贡献。

本地开发环境搭建

本地开发需要准备：

• .NET Core SDK 9.0.100 或更高版本（构建组件库源码所需）；
• Node.js：仅用于构建样式文件与互操作的 TypeScript 文件（即 components/core/JsInterop 下的.ts源码与 Less 样式编译）。

克隆仓库并执行构建：

$ git clone git@github.com:ant-design-blazor/ant-design-blazor.git $ cd ant-design-blazor $ npm install $ dotnet build ./site/AntDesign.Docs.Build/AntDesign.Docs.Build.csproj $ npm start

构建完成后，在支持的浏览器中访问https://localhost:5001即可预览本地文档站点。site/AntDesign.Docs.Build是文档站的构建工程，npm start负责起本地开发服务器。官方推荐使用 Visual Studio 2022 进行开发调试。构建产物经由 AntDesign.Docs.Build 汇总，最终可通过npm流水线产出静态站点。

测试、社区与许可证

• 测试保障：组件库在 tests/AntDesign.Tests 下维护了大量单元测试与 Razor 组件测试，同时AntDesign.csproj通过InternalsVisibleTo向测试程序集开放内部成员，保证核心逻辑可被充分验证。
• 贡献与反馈：项目欢迎社区以 Pull Request 与 Bug Report 的方式参与共建，遇到问题时可通过官方社区渠道（如 Discord 服务器）提问，也鼓励有经验的用户帮助新人。
• 许可证：项目采用 MIT 许可证（见仓库根目录 LICENSE），使用与二次开发均十分宽松。

从特性、环境兼容到安装集成，本文覆盖了 Ant Design Blazor 的全部入门要点。接下来建议顺着 docs/getting-started.en-US.md 走一遍“创建项目 → 安装 → 注册 → 运行”的完整流程，并在 components 中逐个浏览你关心的组件实现，即可快速上手这套纯 C# 的企业级 UI 解决方案。

• 前端
• UI组件
• 设计系统