Ant Design Pro Blazor 项目教程

最新推荐文章于 2025-05-12 07:57:07 发布

邓朝昌Estra

最新推荐文章于 2025-05-12 07:57:07 发布

阅读量869

点赞数 19

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00497/article/details/142010097

Ant Design Pro Blazor 项目教程

ant-design-pro-blazor👨🏻‍💻👩🏻‍💻 An out-of-box UI solution for enterprise applications as a Blazor boilerplate.项目地址:https://gitcode.com/gh_mirrors/an/ant-design-pro-blazor

1. 项目的目录结构及介绍

ant-design-pro-blazor/
├── src/
│   ├── AntDesign Pro/
│   │   ├── Components/
│   │   ├── Pages/
│   │   ├── Services/
│   │   ├── Shared/
│   │   ├── App.razor
│   │   ├── MainLayout.razor
│   │   ├── NavMenu.razor
│   │   └── Program.cs
│   ├── AntDesign Pro.sln
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── README.zh-CN.md
├── logo.png
├── package.json
└── templates.csproj

目录结构介绍

src/: 项目的主要源代码目录。
- AntDesign Pro/: 包含项目的核心代码。
  - Components/: 存放自定义组件。
  - Pages/: 存放项目的各个页面。
  - Services/: 存放服务类，用于处理业务逻辑。
  - Shared/: 存放共享的组件和资源。
  - App.razor: 项目的根组件。
  - MainLayout.razor: 主布局组件。
  - NavMenu.razor: 导航菜单组件。
  - Program.cs: 项目的入口文件。
- AntDesign Pro.sln: 项目的解决方案文件。
.gitattributes: Git 属性配置文件。
.gitignore: Git 忽略文件配置。
LICENSE: 项目许可证文件。
README.md: 项目的英文介绍文档。
README.zh-CN.md: 项目的中文介绍文档。
logo.png: 项目的 Logo 图片。
package.json: 项目的包管理文件。
templates.csproj: 项目的模板配置文件。

2. 项目的启动文件介绍

Program.cs

Program.cs 是项目的入口文件，负责配置和启动 Blazor 应用程序。以下是文件的主要内容：

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Net.Http;
using System.Threading.Tasks;

namespace AntDesignPro
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            await builder.Build().RunAsync();
        }
    }
}

主要功能

WebAssemblyHostBuilder.CreateDefault(args): 创建默认的 WebAssembly 主机构建器。
builder.RootComponents.Add ("#app") : 将 App 组件注册为根组件。
builder.Services.AddScoped: 注册依赖注入服务。
builder.Build().RunAsync(): 构建并运行应用程序。

3. 项目的配置文件介绍

package.json

package.json 文件用于管理项目的依赖和脚本。以下是文件的主要内容：

{
  "name": "ant-design-pro-blazor",
  "version": "1.0.0",
  "description": "An out-of-box UI solution for enterprise applications as a Blazor boilerplate",
  "scripts": {
    "start": "dotnet watch run",
    "build": "dotnet build",
    "test": "dotnet test"
  },
  "dependencies": {
    "ant-design-blazor": "^0.10.0"
  },
  "devDependencies": {
    "less": "^4.1.1"
  }
}

主要配置项

name: 项目名称。
version: 项目版本。
description: 项目描述。
scripts: 定义项目的脚本命令，如 start, build, test。
dependencies: 项目的依赖包，如 ant-design-blazor。
devDependencies: 开发环境的依赖包，如 less。

.gitignore

.gitignore 文件用于指定 Git 忽略的文件和目录。以下是文件的部分内容：

# Ignore Visual Studio temporary files, build results, and
# files generated by popular Visual Studio add-ons.

# User-specific files
*.suo
*.user
*.userosscache
*.sln.docstates

# Build results
[Dd]ebug/
[Rr]elease/