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  

没有报错就算完成了

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

相关推荐
酩酊仙人9 小时前
ABP+Hangfire实现定时任务
后端·c#·asp.net·hangfire
牛魔王_111 小时前
ASP.NET 超时机制分析
后端·http·asp.net·超时·代码
William_cl13 小时前
【保姆级】ASP.NET Razor 视图引擎:@if/@foreach 核心语法拆解(附避坑指南 + 生活类比)
后端·asp.net·生活
步步为营DotNet16 小时前
深度剖析ASP.NET Core Middleware:构建高效请求处理管道的关键
后端·asp.net
梦65019 小时前
基于Umi 框架(Ant Design Pro 底层框架)的动态路由权限控制实现方案
前端·react
Caco.D1 天前
Aneiang.Pa 代理池(Proxy Pool)功能与 ASP.NET Core Web API 集成实战
爬虫·asp.net·.net·aneiang.pa
孤狼warrior1 天前
纯AI开发能做到什么地步 他心游 经典博客项目
react·ai编程
跟着珅聪学java1 天前
React 菜鸟开发教程
react
Aevget2 天前
DevExtreme JS & ASP.NET Core v25.2新功能预览 - 字体栈、可访问性升级增强
javascript·asp.net·界面控件·devexpress·ui开发·devextreme
zzlyx992 天前
ASP.NET Core 依赖注入的三种服务生命周期的不同使用
后端·asp.net