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

news2025/1/14 18:40:36

不重要的目录标题

  • 前提条件
  • 第一步:新建文件夹
  • 第二步:使用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.coloradmin.cn/o/980964.html

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

相关文章

亚马逊云科技人工智能内容审核服务:大大降低生成不安全内容的风险

生成式人工智能技术发展日新月异&#xff0c;现在已经能够根据文本输入生成文本和图像。Stable Diffusion是一种文本转图像模型&#xff0c;可以创建栩栩如生的图像应用。通过Amazon SageMaker JumpStart&#xff0c;使用Stable Diffusion模型轻松地从文本生成图像。 尽管生成式…

科技云报道:AI时代,对构建云安全提出了哪些新要求?

科技云报道原创。 随着企业上云的提速&#xff0c;一系列云安全问题也逐渐暴露出来&#xff0c;云安全问题得到重视&#xff0c;市场不断扩大。 Gartner 发布“2022 年中国 ICT 技术成熟度曲线”显示&#xff0c;云安全已处于技术萌芽期高点&#xff0c;预期在2-5年内有望达到…

HTML emoji整理 表情符号

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>测试</title></head><body><div style"font-size: 50px;">&#128276</div><script>let count 0d…

树的基本定义

树的基本术语 一个节点包括一下内容 父节点的地址值值左节点的地址值右节点的地址值 如果没有父节点或者没有左右节点&#xff0c;那么这些节点对应的位置是 null 常见术语 节点—树中的元素常称为节点 边—根和它的子树根&#xff08;如果存在&#xff09;之间形成边的边可…

【数据结构】绪论

绪论 1.1数据结构的基本概念1.1.1 基本概念和术语1.1.2数据结构的三要素 1.2 算法与算法评价 1.1数据结构的基本概念 1.1.1 基本概念和术语 数据 数据是信息的载体&#xff0c;是描述客观事物属性的数、字符及所有能输入到计算机中并被计算机程序识别 和处理的符号的集合。数…

企业架构LNMP学习笔记17

反向代理&#xff1a; 反向代理服务器和真实访问的服务器是在一起的&#xff0c;有关联的。 根据实际业务需求&#xff0c;分发代理页面到不同的解释器。常见于代理后端服务器。 安装apache服务器&#xff1a; yum install -y httpd 修改配置文件&#xff1a; vim /et/http…

Postern配置HTTP和HTTPS的步骤

Postern是一款强大的Android代理工具&#xff0c;它允许您在设备上配置全局代理来实现安全、隐私保护和自由上网。本文将详细介绍如何使用Postern在Android设备上配置HTTP和HTTPS代理&#xff0c;为您提供更便捷的上网体验。 步骤1&#xff1a;下载和安装Postern应用 首先&am…

Threejs汽车展厅

2023-09-06-16-29-40 源码链接

浏览器安全-同源策略和CORS

同源策略 同源策略是浏览器的一个安全功能&#xff0c;浏览器禁止在当前域读写其他域的资源&#xff0c;如限制跨域发送ajax请求 不受同源策略限制的 1&#xff09;页面中的链接&#xff0c;重定向表单以及表单提交 2&#xff09;跨域资源引入 如script不受跨域限制&#xff0…

【网络编程】TCP传输控制协议(Transmission Control Protocol)

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;数据结构&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;网络编程等领域UP&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff0…

pandas(四十三)Pandas实现复杂Excel的转置合并

一、Pandas实现复杂Excel的转置合并 读取并筛选第一张表 df1 pd.read_excel("第一个表.xlsx") df1# 删除无用列 df1 df1[[股票代码, 高数, 实际2]].copy() df1df1.dtypes股票代码 int64 高数 float64 实际2 int64 dtype: object读取并处理第二张表…

函数栈帧(详解)

一、前言&#xff1a; 环境&#xff1a;X86Vs2013 我们C语言学习过程中是否遇到过如下问题或者疑惑&#xff1a; 1、局部变量是如何创建的&#xff1f; 2、为什么局部变量的值是随机值&#xff1f; 3、函数是怎么传参的&#xff1f;传参的顺序是怎样的&#xff1f; 4、形…

Python实现猎人猎物优化算法(HPO)优化循环神经网络分类模型(LSTM分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…

【Arduino25】液晶模拟值实验

硬件准备 LCD1602显示屏&#xff1a;1 个 220欧的电阻&#xff1a;1 个 旋钮电位器&#xff1a;1 个 面包板&#xff1a;1个 杜邦线&#xff1a;若干 硬件连线 软件程序 #include <LiquidCrystal.h>LiquidCrystal lcd(12,11,5,4,3,2);void setup(){lcd.begin(16,2);…

UNIX网络编程卷一 学习笔记 第三十一章 流

在大多数源自SVR 4的内核中&#xff0c;X/Open传输接口&#xff08;X/Open Transport Interface&#xff0c;XTI&#xff0c;是独立于套接字API的另一个网络编程API&#xff09;和网络协议通常就像终端IO系统那样也使用流系统&#xff08;STREAMS system&#xff09;实现。 我…

VS Code断点调式Cesium

1.在VS Code中安装Debugger for Firefox插件 2.下载安Firefox Developer Edition 3. 创建launch.json 编辑并保存launch.json {// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information, vis…

ETCD详解

一、etcd概念 ETCD 是一个高可用的分布式键值key-value数据库&#xff0c;可用于服务发现。 ETCD 采用raft 一致性算法&#xff0c;基于 Go语言实现。 etcd作为一个高可用键值存储系统&#xff0c;天生就是为集群化而设计的。由于Raft算法在做决策时需要多数节点的投票&…

06 科技英语|控制与优化学科词汇

maneuver n 策略&#xff1b;v 操控、调遣 manipulate vt 熟练控制 scalability n 可扩展性 leverage n 杠杆&#xff1b;v 促使...改变 flexibility n 弹性 dispatch n 急件&#xff1b;v 调度&#xff1b;派遣 leverage …

[TQLCTF 2022]simple_bypass

文章目录 涉及知识点解题过程 涉及知识点 无数字字母RCE自增马构造文件包含读取源码 解题过程 打开题目&#xff0c;随便注册一个用户为admin 登陆进去后&#xff0c;一眼发现杰哥图片有线索 我们F12看一下如何请求的 在这里发现可能存在文件包含漏洞 我们尝试读取下源码 …

深度优先搜索(dfs)--矩阵部分-leetcode以及常见题

介绍 深度优先搜索&#xff08;Depth-First Search&#xff0c;DFS&#xff09;是一种常用的图搜索算法&#xff0c;它用于查找图或树数据结构中的路径或解决问题。下面是深度优先搜索的常见步骤以及一个示例问题&#xff1a; 深度优先搜索的常见步骤&#xff1a; 选择起始节…