AntDesignBlazor示例——创建项目

本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考。

示例代码仓库:https://gitee.com/known/BlazorDemo

1. 开发环境

  • VS2022 17.8.2
  • .NET8
  • AntDesign 0.16.2

2. 学习目标

  • 创建新项目
  • 安装AntDesign组件包及使用方法
  • 添加按钮测试组件

3. 演练步骤

  1. 打开VS2022,新建Blazor Web App,命名AntDesignDemo
  2. 双击AntDesignDemo工程文件,添加AntDesign,或者使用nuget工具搜索安装

    
     
         net8.0
         enable
         enable
     
     
         
         
     
    
  3. 双击Components/App.razor文件,添加AntDesign的css和js

    
    
    
     
     
     
     
     
     
     
     
     
     
    
    
     
     
     
     
    
    
  4. 双击Components/_Imports.razor文件,在最后一行添加命名空间

    @using System.Net.Http
    @using System.Net.Http.Json
    @using Microsoft.AspNetCore.Components.Forms
    @using Microsoft.AspNetCore.Components.Routing
    @using Microsoft.AspNetCore.Components.Web
    @using static Microsoft.AspNetCore.Components.Web.RenderMode
    @using Microsoft.AspNetCore.Components.Web.Virtualization
    @using Microsoft.JSInterop
    @using AntDesignDemo
    @using AntDesignDemo.Components
    //这里添加命名空间
    @using AntDesign
  5. 双击Components/Routes.razor文件,添加AntContainer

    
     
         
         
     
    
    
    
  6. 双击Program.cs文件,注册AntDesign

    using AntDesignDemo.Components;
    
    var builder = WebApplication.CreateBuilder(args);
    // Add services to the container.
    builder.Services.AddRazorComponents()
                 .AddInteractiveServerComponents();
    //这里注册AntDesign
    builder.Services.AddAntDesign();
    
    var app = builder.Build();
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
     app.UseExceptionHandler("/Error", createScopeForErrors: true);
     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
     app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseAntiforgery();
    app.MapRazorComponents()
    .AddInteractiveServerRenderMode();
    app.Run();
  7. 最后双击Components/Pages/Home.razor文件,添加AntDesign的按钮组件进行测试

    @page "/"
    @*//这里注入MessageService*@
    @inject IMessageService _message;
    
    Home
    

    Hello, world!

    Welcome to your new app. @code { //按钮单击方法 private void OnHelloClick() { //提示信息 _message.Info("Hello AntDesign Blazor!"); } }
  8. 运行App查看效果,如下图

AntDesignBlazor示例——创建项目_第1张图片

4. 视频

https://www.bilibili.com/video/BV1FN4y1e72T/

你可能感兴趣的:(antdblazor)