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  

没有报错就算完成了

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

相关推荐
大连好光景3 小时前
ReAct的原理?与CoT的区别是啥?
react·cot
大连好光景3 小时前
Agent完整工作过程
react·agent完整工作流程
QQ_21696290961 天前
基于C#(Asp.net)电竞陪玩信息管理系统的设计与实现
java·大数据·spring boot·微信小程序·c#·云计算·asp.net
FungLeo2 天前
成为全栈·Next.js 网站前台篇·同源 BFF 代理:API、附件、Cookie 与跨站写入保护
react·csrf·next.js·bff·成为全栈·route handler
wdfk_prog2 天前
Wi-Fi Direct 源码分析(11):P2P-GROUP-STARTED 之后——Group Interface、IP 配置与真实数据通路
运维·服务器·网络协议·tcp/ip·asp.net·p2p·wifi-direct
Alice-YUE2 天前
React 渲染机制速通:Render 树、Fiber 树与更新调度
前端·react.js·前端框架·react·fiber·前端性能·渲染机制
传奇开心果编程3 天前
【现代声明式UI学与练】第1课 从命令式UI到声明式UI
学习·flutter·ui·swiftui·react·android jetpack
frjc3 天前
前端技术选型:主流方案对比与落地建议
vue·react·angular
wdfk_prog3 天前
Wi-Fi Direct 源码分析(09):从 P2P_CONNECT 到 GO Negotiation 完成
运维·服务器·ubuntu·golang·asp.net·p2p·wifi-direct
迪丽热爱6 天前
HTTP Error 500.30 - ASP.NET Core app failed to start
后端·asp.net