Ant Design of Blazor 教程 从0-1搭建 2.项目创建

已于 2022-04-13 17:01:29 修改
阅读量3.2k 收藏 5
点赞数 2
分类专栏： Blazor Ant Design of Blazor 文章标签： c# net
于 2020-09-16 17:06:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38436796/article/details/108624379
版权

1.Blazor创建

这里我使用的是vs2022创建，搜索blazor webAssembly应用

 这个可勾选和不勾选都可以，勾选是Sever和Client分开，不勾选是这两个合并在一起

2.Blaozr项目运行

将Server设置为运行项目，不要选择client运行否则调用server接口的时候会失败，也不要用iis运行，这样不方便断点调试。

3.项目调试

很多同学刚上手项目的时候不知道怎么调试，这里详细说一下

1.首先一定要将Server设置为启动项目

2.个人推荐用Edge浏览器进行调试，谷歌浏览器也行，只不过有时候代理会报错

最低0.47元/天 解锁文章
千金少
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Ant Design of Blazor 教程 从0-1搭建 3.环境搭建
千金少的博客
09-16 2661
1.新建组件 1.在Razor新建组件 2.编辑组件 3.在client引入组件，并运行 4.运行结果如图
使用 Blazor 开发内部后台（三）：登录
dotNET跨平台
07-21 5093
James: 《使用Blazor开发内部后台》系列是技术社区中一位朋友投稿的系列文章，介绍自己为公司的 WebForm 遗留系统使用 Blazor 重写前端 UI 的经历。本文为第三篇，如...
【Blazor之关于组件库Ant Design of Blazor组件样式的修改】
weixin_48464854的博客
11-14 1517
Blazor之关于组件库Ant Design of Blazor组件样式的修改
在已有的Blazor Web App项目中使用Ant Design of Blazor 组件
最新发布
m0_54673574的博客
06-07 563
在_Imports.razor引用@using AntDesign之后，就可以在我们的razor组件中使用了，如。Ant Design of Blazor为我们的Blazor Web App项目提供了一套丰富的组件。这里要注意Button首字母要大写，如果写成button就会被识别为html里的按钮。在你的项目中使用NuGet下载AntDesign。在program.cs文件中注册服务。App.razor的head中。下面我就介绍怎么使用。
Ant Design Blazor入门（使用ant模板初始化项目及运行github代码）
qq_40600379的博客
03-21 3284
Ant Design Blazor支持MIT开源协议，Ant Design Blazor Pro支持Apache2.0开源协议。​ 使用CMD安装ant模板，可以帮助我们获取到一个项目模板。​
Blazor + Ant Design + .NET 5快速开发框架（2） - AntDesign的引用
qq_32174441的博客
02-02 1970
搭建 AntDesign的后台搭建很简单，官网给出了详细的教程 1、现在NuGet里面搜索AntDesign，然后安装，这里我安装的版本是：0.6.0. 或者 进入应用的项目文件夹，安装 Nuget 包引用 $ dotnet add package AntDesign --version 0.6.0-* 2、在项目中注册: services.AddAntDesign(); 因为我的项目还没有添加Startup，就在Program里面注册了：builder.Services.AddA.
AntDesignBlazor示例——暗黑模式
knownchen的专栏
01-13 773
本示例是的入门示例，在学习的同时分享出来，以供新手参考。示例代码仓库：https://gitee.com/known/BlazorDemo。本次介绍暗黑模式。
Ant Design of Blazor 教程 从0-1搭建 4.组件使用
千金少的博客
04-13 1433
1.组件使用 上一章教程中，我已经完成Pro项目的搭建，接下来将以这个项目为原型，做一个简单的页面让大家熟悉组件的使用。 下面是效果图 实现代码 @using System.Text.Json @using AntDesign.TableModels @page "/" <PageContainer Title="表格查询"> <Card> <Descriptions Title="Search Menu">
ant-design-vue-jeecg-master.zip
05-17
这个项目代码库，"ant-design-vue-jeecg-master.zip"，提供了完整的前端开发资源，适合开发者们学习和研究。 Ant Design Vue 是阿里团队推出的 Vue 版本的 Ant Design，它继承了 Ant Design 的设计哲学，同时利用 ...
apache-ant-1.10.12-bin.tar.bz2
04-22
apache-ant-1.10.12-bin.tar.bz2
ant-design-vue-pro-master.zip
08-20
Ant Design Vue Pro Master是一个基于Ant Design Vue的前端项目框架，提供了丰富的UI组件和优化的开发体验。此压缩包包含了项目的一个特定版本，该版本特别支持多页签功能，允许用户在同一个应用内方便地切换不同的...
apache-ant-1.9.16-bin.zip
04-22
在解压"apache-ant-1.9.16-bin.zip"后，你会得到一个名为"apache-ant-1.9.16"的目录，其中通常包含以下关键组件： 1. **bin** 目录：包含各种平台的可执行脚本，如`ant`和`ant.bat`，它们是Ant的命令行接口，用于...
apache-ant-1.9.16-bin.tar.gz
04-22
2. 使用tar命令在Linux或macOS系统中解压文件：`tar -zxvf apache-ant-1.9.16-bin.tar.gz` 3. 在Windows上，你可以使用7-Zip或其他支持gzip和tar格式的解压工具进行解压。 4. 解压后，你会得到一个名为"apache-ant-...
通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design
dotNET跨平台
08-21 1097
通过Blazor使用C#开发SPA单页面应用程序(1)通过Blazor使用C#开发SPA单页面应用程序(2)通过Blazor使用C#开发SPA单页面应用程序(3) 前面...
跨平台客户端Blazor方案尝试
yinyunpan68的专栏
10-16 371
NetCore 跨平台客户端方案，采用Electron/MAUI + Blazor(AntDesgin blazor)，一步步配置、开发使用以及其中遇到问题。
学习.NET MAUI Blazor（三）、创建.NET MAUI Blazor应用并使用AntDesignBlazor
What If...
12-23 2248
大致了解了Blazor和MAUI之后，尝试创建一个.NET MAUI Blazor应用。 **需要注意的是：** 虽然都叫MAUI，但`.NET MAUI`与`.NET MAUI Blazor` 并不相同，MAUI还是以`xaml`为主，而MAUI Blazor则是以`razor`为主。
Ant for Blazor做单个表的增删查改
牛腩的专栏
02-27 459
2024年02月27日花了一天时间弄出来了，基本弄好了，vs2022+blazor server+net8,引用的AntDesign版本是0.17.4。代码里的model和repository是用自己牛腩代码生成器生成的东西，sqlsugar的，记得在program里注入就好。Ant for Blazor做单个表的增删查改。
Ant Design of Blazor 教程 从0-1搭建 1.工具篇
千金少的博客
09-16 4088
1.Blazor及AntBlazor Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架： 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。 共享使用 .NET 编写的服务器端和客户端应用逻辑。 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。 与新式托管平台（如 Docker）集成。 使用 .NET 进行客户端 Web 开发可提供以下优势： 使用 C# 代替 JavaScript 来编写代码。 利用现有的 .NET 库生
这样设置并不生效，仍然会被下面这个属性替代：.ant-modal.custom-modal.ant-confirm-confirm .ant-modal-content .ant-modal-body .ant-confirm-body-wrapper .ant-confirm-btns .ant-btn
06-09
如果你的自定义样式无法覆盖默认样式，你可以使用 `!important` 规则来强制应用自定义样式。例如： ``` import { Modal, Button } from 'antd'; Modal.confirm({ className: 'custom-modal', title: window.language['playlist.tip'], content: window.language['playlist.des5'], okButtonProps: { style: { width: '100px', height: '50px', }, className: 'custom-ok-button', }, cancelButtonProps: { style: { width: '120px', height: '50px', }, className: 'custom-cancel-button', }, onOk: () => { // 确认操作 }, onCancel: () => { // 取消操作 }, }); ``` 然后在你的 CSS 文件中添加以下代码： ``` .custom-modal .custom-ok-button { width: 100px !important; height: 50px !important; } .custom-modal .custom-cancel-button { width: 120px !important; height: 50px !important; } ``` 这样就可以强制应用自定义样式了。如果你仍然无法覆盖默认样式，你可以使用更具体的 CSS 选择器来定位元素并应用自定义样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值