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 天前
基于ASP.NET MVC+SQLite开发的一套(Web)图书管理系统
sqlite·asp.net·mvc
神仙别闹1 天前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
咖丨喱2 天前
【Action帧简要分析】
服务器·数据库·asp.net
发粪的屎壳郎3 天前
ASP.NET Core 8 轻松配置Serilog日志
后端·asp.net·serilog
Crazy Struggle4 天前
.NET 9 + React 开发的企业级后台权限管理系统,文档齐全,轻松上手
react·权限管理系统·后台管理系统·.net 9.0
程序员秘密基地4 天前
基于html,css,vue,vscode,vs2022,asp.net,aspnet,.net,c#,mysql数据库,在线健身,俱乐部管理系统
前端·vue.js·后端·mysql·asp.net
wstcl4 天前
让你的asp.net网站在调试模式下也能在局域网通过ip访问
后端·tcp/ip·asp.net
合作小小程序员小小店5 天前
web网页开发,在线%ctf管理%系统,基于html,css,webform,asp.net mvc, sqlserver, mysql
mysql·sqlserver·性能优化·asp.net·mvc
Python私教7 天前
FastAPI+React19 ERP系统实战 第01期
react·fastapi
一笑code8 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react