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  

没有报错就算完成了

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

相关推荐
钛态1 天前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
钛态1 天前
前端趋势:别被时代抛弃
前端·vue·react·web
迪普阳光开朗很健康2 天前
告别繁琐!用ApkInfoQuick快速提取APK关键信息
android·rust·react
Mr. zhihao4 天前
深入理解 ReAct 循环:从 LLM 决策到工具执行的完整闭环
python·ai·react
j_xxx404_5 天前
我用 Codex 做了一个智能围棋机器人系统:从 AI 引擎接入到前后端联调的完整实战
c++·人工智能·python·机器人·软件工程·团队开发·react
花千树-0106 天前
ReAct 思考-行动-观察循环的底层实现机制
langchain·agent·react·ai编程·ai agent·langgraph·mcp
医疗信息化王工6 天前
基于ASP.NET Core的医院不良事件管理系统的架构设计
后端·asp.net
花千树-0106 天前
ReAct Agent是什么?与传统LLM/Chatbot的本质区别(原理篇)
langchain·react·ai编程·chatbot·ai agent·langgraph·mcp
Sheldon一蓑烟雨任平生7 天前
Vite 深度剖析(一)
vue·react·vite·环境变量·esbuild·vite.config.ts·依赖预构建
余衫马8 天前
在 Windows 服务中托管 ASP.NET Core Web API (.net6)
运维·windows·后端·asp.net·.net