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

不重要的目录标题

前提条件

安装dotnet core sdk

安装Node.js + npm

第一步:新建文件夹

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

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

在终端或cmd中直接运行

bash 复制代码
cd yourProjectAddress
dotnet new react

VS Code 如下图

第三步:安装依赖

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

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

第四步:试运行react

使用以下语句运行

bash 复制代码
npm start

顺利的话会出现这样的结果

之后点开跳转到网页看看

可能会出现这种情况

点击Advanced, 再点击Proceed前往就行

看到这样的网页就算完成了

第五步:整理项目结构

右键新建文件夹src,然后把.Net的一些文件挪过去

之后在src同级目录下运行,创建解决方案

bash 复制代码
dotnet new sln

之后会出现项目名.sln

bash 复制代码
dotnet sln add src/yourProject.csproj

将项目"yourProject.csproj"添加到解决方案中。

之后编辑src/yourProject.csproj

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

bash 复制代码
<SpaRoot>..\ClientApp\</SpaRoot> #new
<SpaRoot>ClientApp\</SpaRoot> #old

最后尝试一下打包

bash 复制代码
dotnet build  

没有报错就算完成了

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

相关推荐
FungLeo5 小时前
成为全栈·React 管理后台篇·后台骨架:布局、数据路由与分层守卫
react·管理后台·权限控制·react router·前端路由·成为全栈
秋秋小事7 小时前
React hooks总览
react
Lost of 程序猿10 小时前
.NET 10 船端单机部署与离线升级实战:从闪退事故到无感回滚
c#·asp.net·.net
西瓜太郎12343 天前
外层模型卡片与分组详情成功率不一致,应该怎么排查?
前端·typescript·go·软件工程·react
星辰徐哥3 天前
本地视频预览别只自己看:把Remotion动效项目发给客户远程验收
docker·ai·node.js·html·音视频·react·remotion
Lost of 程序猿3 天前
M2 实战:询价与采购订单聚合落地——跨聚合一致性、领域事件与 Outbox
开发语言·c#·asp.net·.net
知兀4 天前
【前端】受控和非受控组件
前端·javascript·react
Lost of 程序猿4 天前
船岸数据同步链路实战:SendFlag、单调版本号与断网三天后的续传
后端·c#·asp.net
醉颜凉5 天前
React触摸事件全解析:掌握移动端交互开发的核心秘籍
react·前端开发·触摸事件·移动端交互·react事件
递归尽头是星辰5 天前
Java 智能体工程化:从 Spring AI 出发读懂 AgentScope
react·智能体·springai·javaai·agentscope