Azure + React + ASP.NET Core 项目笔记一:项目环境搭建(一)

不重要的目录标题

  • 前提条件
  • 第一步:新建文件夹
  • 第二步:使用VS/ VS code/cmd 打开该文件夹
  • 第三步:安装依赖
  • 第四步:试运行react
  • 第五步:整理项目结构

前提条件

安装dotnet core sdk
安装Node.js + npm

第一步:新建文件夹

选择喜欢的位置新建文件夹,然后开始摸鱼 然后进行下一步

第二步:使用VS/ VS code/cmd 打开该文件夹

在终端或cmd中直接运行

cd yourProjectAddress
dotnet new react

VS Code 如下图
在这里插入图片描述

第三步:安装依赖

我们新初始化的项目并没有安装包,特别是前端部分,所以需要先安装

cd ClientApp
npm install #按照package.json安装
# 另外也可以使用以下语句单独安装
npm install <package_name>

第四步:试运行react

使用以下语句运行

npm start

顺利的话会出现这样的结果
在这里插入图片描述
之后点开跳转到网页看看
可能会出现这种情况
在这里插入图片描述
点击Advanced, 再点击Proceed前往就行
在这里插入图片描述
看到这样的网页就算完成了
在这里插入图片描述

第五步:整理项目结构

右键新建文件夹src,然后把.Net的一些文件挪过去
在这里插入图片描述
之后在src同级目录下运行,创建解决方案

dotnet new sln

之后会出现项目名.sln
在这里插入图片描述

dotnet sln add src/yourProject.csproj

将项目“yourProject.csproj”添加到解决方案中。
之后编辑src/yourProject.csproj

替换SpaRoot 这行,改变目录,因为文件位置改了

<SpaRoot>..\ClientApp\</SpaRoot> #new
<SpaRoot>ClientApp\</SpaRoot> #old

最后尝试一下打包

dotnet build  

没有报错就算完成了
在这里插入图片描述

如果有帮助到你,点个赞吧!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/72364.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机Ubuntu20.04 网络连接器图标开机不显示怎么办

执行以下指令&#xff1a; sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service network-manager start

【MySQL】初见数据库

目录 什么是MySQL 为什么要使用数据库 数据库基础 数据库的本质 存储引擎 常用操作 登录mysql 创建数据库 使用数据库 查看数据库 创建数据库表 查看表 向表中插入数据 查询表中数据 什么是MySQL &#x1f352;在我们服务器安装完 MySQL 服务之后&#xff0c;经…

【C语言】初阶测试 (带讲解)

目录 ① 选择题 1. 下列程序执行后&#xff0c;输出的结果为( ) 2. 以下程序的输出结果是&#xff1f; 3. 下面的代码段中&#xff0c;执行之后 i 和 j 的值是什么&#xff08;&#xff09; 4. 以下程序的k最终值是&#xff1a; 5. 以下程序的最终的输出结果为&#xff…

Redisson分布式锁实战

实战来源 此问题基于电商 这周遇见这么一个问题&#xff0c;简略的说一下 由MQ发布了两个消息&#xff0c;一个是订单新增&#xff0c;一个是订单状态变更 由于直接付款之后&#xff0c;这两个消息的发布时间不分先后&#xff0c;可能会造成两种情况&#xff0c;1、订单状态变更…

Spark2x原理剖析(二)

一、概述 基于社区已有的JDBCServer基础上&#xff0c;采用多主实例模式实现了其高可用性方案。集群中支持同时共存多个JDBCServer服务&#xff0c;通过客户端可以随机连接其中的任意一个服务进行业务操作。即使集群中一个或多个JDBCServer服务停止工作&#xff0c;也不影响用…

后端笔试题(2)分频器波形图

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口

算法通关村第十八关:青铜挑战-回溯是怎么回事

青铜挑战-回溯是怎么回事 回溯&#xff0c;最重要的算法之一 主要解决一些暴力枚举也搞不定的问题&#xff0c;例如组合、分割、子集、排列、棋盘等 从性能角度来看回溯算法的效率并不高&#xff0c;但对于这些暴力都搞不定的算法能出结果就很好了&#xff0c;效率低点没关系…

c++类与对象

文章目录 前言一、1、类的引入2、类的定义3、类的访问限定符及封装4、类的实例化5、类对象模型6、this指针7、封装 前言 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关…

MySQL聚簇索引与非聚簇索引

分析&回答 当数据库一条记录里包含多个字段时&#xff0c;一棵B树就只能存储主键&#xff0c;如果检索的是非主键字段&#xff0c;则主键索引失去作用&#xff0c;变成顺序查找了。这时应该在第二个要检索的列上建立第二套索引。这个索引由独立的B树来组织。有两种常见的方…

2023国赛数学建模B题思路分析 - 多波束测线问题

# 1 赛题 B 题 多波束测线问题 单波束测深是利用声波在水中的传播特性来测量水体深度的技术。声波在均匀介质中作匀 速直线传播&#xff0c; 在不同界面上产生反射&#xff0c; 利用这一原理&#xff0c;从测量船换能器垂直向海底发射声波信 号&#xff0c;并记录从声波发射到…

vue基于Echarts、百度地图MapVGL实现可视化大屏数据展示

一、布局 常见的大屏数据展示布局&#xff0c;一般会将地图作为整个屏幕的背景&#xff0c;在地图上以九宫格布局展示各类数据图表。实现这一效果可以使地图的z-index1,在地图上的图表等z-index>1,下面会详细描述这种设计该如何实现&#xff1a; <div style"width…

嵌入式开发笔试面试

C语言部分&#xff1a; 1.gcc的四步编译过程 1.预处理 展开头文件&#xff0c;删除注释、空行等无用内容&#xff0c;替换宏定义。 gcc -E hello.c -o hello.i 2.编译 检查语法错误&#xff0c;如果有错则报错&#xff0c;没有错误则生成汇编文件。 gcc -S hello.i -o h…

C++ vector模拟实现

目录 使用insert时迭代器失效使用erase时迭代器失效使用memcpy浅拷贝的问题调用最匹配的函数可能出现的问题模拟实现vector 使用insert时迭代器失效 在模拟vector插入的时候会遇到扩容后pos失效的问题&#xff0c;需要更新pos vector():_start(nullptr), _finish(nullptr), _e…

解耦只是一个巧合?

本文分享一篇在IJCAI2023看到的文章&#xff1a;Overlooked Implications of the Reconstruction Loss for VAE Disentanglement 首先回顾下VAE&#xff0c;其loss函数有两项&#xff0c;一项是重构误差&#xff0c;另一项是正则项&#xff1a; L r e c ( x , x ^ ) E q ϕ (…

QT(9.1)对话框与事件处理

作业&#xff1a; 1. 完善登录框 点击登录按钮后&#xff0c;判断账号&#xff08;admin&#xff09;和密码&#xff08;123456&#xff09;是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&…

23062C++QT day2

封装一个结构体&#xff0c;结构体中包含一个私有数组&#xff0c;用来存放学生的成绩&#xff0c;包含一个私有变量&#xff0c;用来记录学生个数&#xff0c; 提供一个公有成员函数&#xff0c;void setNum(int num)用于设置学生个数 提供一个公有成员函数&#xff1a;void…

FPGA实战小项目3

基于FPGA的波形发生器 基于FPGA的波形发生器 基于FPGA的beep音乐播放器设计 基于FPGA的beep音乐播放器设计 基于FPGA的cordic算法实现DDS sin和cosine波形的产生 基于FPGA的cordic算法实现DDS sin和cosine波形的产生

无需公网IP,实现远程访问群晖Drive并挂载为电脑磁盘的方法

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…

利用MQ实现mysql与elasticsearch数据同步

流程 1.声明exchange、queue、RoutingKey 2. 在hotel-admin中进行增删改&#xff08;SQL&#xff09;&#xff0c;完成消息发送 3. 在hotel-demo中完成消息监听&#xff0c;并更新elasticsearch数据 4. 测试同步 1.引入依赖 <!--amqp--> <dependency><groupId&…

欧洲云巨头OVHcloud收购边缘计算专家 gridscale

边缘计算社区近日获悉&#xff0c;欧洲云巨头OVHcloud已进入全面收购德国公司 gridscale 的谈判&#xff0c;该公司是一家专门从事超融合基础设施的软件提供商。 此次战略收购将标志着 OVHcloud 的另一个重要里程碑&#xff0c;使该集团能够显着加速其地理部署&#xff0c;并进…