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
    评论
专栏目录
使用 Blazor 开发内部后台（三）：登录
dotNET跨平台
07-21 5092
James: 《使用Blazor开发内部后台》系列是技术社区中一位朋友投稿的系列文章，介绍自己为公司的 WebForm 遗留系统使用 Blazor 重写前端 UI 的经历。本文为第三篇，如...
在已有的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 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 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 of Blazor 教程 从0-1搭建 3.环境搭建
千金少的博客
09-16 2661
1.新建组件 1.在Razor新建组件 2.编辑组件 3.在client引入组件，并运行 4.运行结果如图
Blazor + Ant Design + .NET 5快速开发框架（3）AntDesignAdmin搭建
qq_32174441的博客
02-03 4254
目录 MainLayout.razor NavMenu.razor wwwroot/app.css 运行效果 知识点 AntDesign是一套企业级框架，但是目前还没有提供admin后台管理模板，只能自己搭建一个了，那么接下来开始搭建 MainLayout.razor @inherits LayoutComponentBase @code { bool collapsed; string ImgStr = "./Images/logo.PNG"; void to
学习.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.design pro中后台平台学习之路（2）
10-08 441
ant.design pro中后台平台学习之路（2） 六. 修改模板题头，版权信息等 1.首先修改logo文件，上传logo.svg文件到src —> assets 文件夹中，替换原来的logo图片即可 2.找到src —> layouts —> UserLayout.tsx, 46行, 修改为如下信息： <div className={styles....
使用ant design 创建简单的页面布局
weixin_45945214的博客
02-26 1251
import { Layout, Menu, Popconfirm, Button } from 'antd' import { PieChartOutlined, SolutionOutlined, FileWordOutlined, LogoutOutlined } from '@ant-design/icons' import './index.scss' const { Header, Sider, Content } = Layout const GeekLayout = () => {.
VUE+Ant Design Vue+.Net Core搭建后台框架-(7)结合JWT实现访问自定义授权
SOF学习拒绝刷屏
03-01 958
VUE+Ant Design Vue+.Net Core搭建后台框架
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-...
记录｜使用ＨslCommunication库进行写入Real数据的坑
技术小白=-=的博客
07-24 532
现在已经通过HslCommunication连接上了PLC，需要对DB1.DBD10的位置处进行数据写入。
C# —— 析构函数
一个新人博客，愿多多支持。
07-25 341
构造函数创建对象 对属性进行初始化的作用析构函数: 当一个对象被释放的时候执行。
C#实现数据采集系统-Mqtt实现采集数据转发
最新发布
海盗Sharp的博客
07-28 51
在数据采集系统中，通过ModbusTcp采集到数据之后，再通过MQTT转发到其他应用。
这样设置并不生效，仍然会被下面这个属性替代：.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、付费专栏及课程。

余额充值