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.hqwc.cn/news/100669.html

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

相关文章

ssprompt:一个LLM Prompt分发管理工具

阅读顺序 &#x1f31f;前言&#x1f514;ssprompt介绍命令介绍Metafile介绍版本依赖规则 &#x1f30a; PromptHubGitHub Token &#x1f680; Quick Install系统依赖pip安装Linux, macOS, Windows (WSL)Windows (Powershell) &#x1f6a9; Roadmap&#x1f30f; 项目交流讨论…

Spring学习笔记——3

Spring学习笔记——3 一、AOP简介1.1、AOP概述1.2、AOP思想的实现方案1.3、模拟AOP的基础代码1.4、AOP的相关概念 二、基于XML配置的AOP2.1、XML方式AOP快速入门2.2、XML方式AOP配置详解2.3、XML方式AOP原理剖析 三、基于注解配置AOP3.1、注解方式AOP基本使用3.2、注解方式AOP配…

react 基础知识(一)

1、 安装1 &#xff08;版本 react 18&#xff09; // 安装全局脚手架&#xff08;create-react-app基于webpackes6&#xff09; npm install -g create-react-app //使用脚手架搭建项目 create-react-app my-app // 打开目录 cd my-app // 运行项目 npm start2、初体验 impo…

【C#】泛型

【C#】泛型 泛型是什么 泛型是将类型作为参数传递给类、结构、接口和方法&#xff0c;这些参数相当于类型占位符。当我们定义类或方法时使用占位符代替变量类型&#xff0c;真正使用时再具体指定数据类型&#xff0c;以此来达到代码重用目的。 泛型特点 提高代码重用性一定…

1.初识爬虫

爬虫是批量模拟网络请求的程序&#xff0c;想百度谷歌这种搜索类网站本质上就是爬虫 使用爬虫的时候不应该对别人的网站有严重的影响&#xff0c;比如你爬的频率太高了&#xff0c;让人家的网站崩溃了。不应该爬取网页上显示不到的内容&#xff0c;比如有一个直播的网站&#…

点云从入门到精通技术详解100篇-伪雷达点云预测

前言 近年来,“自动驾驶”已经成为一个耳熟能详的词语,它是一种通过车载计 算实现无人驾驶的智能汽车系统。自动驾驶汽车依靠人工智能、视觉计算、视觉 传感器、控制设备和定位系统协同合作,让系统可以在无人主动操作的情况下, 自动安全地操作机动车辆。其中视觉传感器作…

MySQL误删数据 回滚

前言 生产环境数据库不允许删除表&#xff0c;可以将表修改成 XXX_to_delete 如果误删简单数据&#xff0c;可以考虑使用binlog恢复 一、查看命令 1.查看binlog是否开启 show variables like log_bin;切换到MySQL安装目录,查看mysqlbinlog日志文件 2.查看所有 binlog 日志…

MySQL之MHA高可用配置及故障切换

目录 一、什么是MHA 二、MHA的组成 1、MHA Node&#xff08;数据节点&#xff09; 2、MHA Manager&#xff08;管理节点&#xff09; 三、MHA的特点 四、MHA工作原理总结 五、MHA实验演示 一、什么是MHA MHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的…

正方实践系统打卡

Use HTTP (已完成) &#x1f4dc; 使用指南 &#x1f6d6; 项目结构 log 日志文件 use 使用情况 (待) data.py 数据 log.py 日志 main.py 主函数 只需要修改data.py文件内容即可&#xff1a; header ——> 头文件 User-AgentCookieAccept user ——> 用户信息 ZFT…

GRU门控循环单元

GRU 视频链接 https://www.bilibili.com/video/BV1Pk4y177Xg?p23&spm_id_frompageDriver&vd_source3b42b36e44d271f58e90f86679d77db7Zt—更新门 Rt—重置门 控制保存之前一层信息多&#xff0c;还是保留当前神经元得到的隐藏层的信息多。 Bi-GRU GRU比LSTM参数少 …

手写Spring:第13章-把AOP扩展到Bean的生命周期

文章目录 一、目标&#xff1a;把AOP扩展到Bean的生命周期二、设计&#xff1a;把AOP扩展到Bean的生命周期三、实现&#xff1a;把AOP扩展到Bean的生命周期3.1 工程结构3.2 AOP动态代理融入Bean的生命周期类图3.3 定义Advice拦截器链3.3.1 定义拦截器链接口3.3.2 方法拦截器链接…

Python综合案例(动态柱状图)

一、基础柱状图 基本代码&#xff1a; """ 演示基础柱状图的开发 """ from pyecharts.charts import Bar from pyecharts.options import LabelOpts # 使用Bar构建基础柱状图 bar Bar() # 添加x轴的数据 bar.add_xaxis(["中国", &q…