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  

没有报错就算完成了

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

相关推荐
高山我梦口香糖5 小时前
[react 3种方法] 获取ant组件ref用ts如何定义?
typescript·react
m0_663234012 天前
在 .NET 5.0 运行 .NET 8.0 教程:使用 ASP.NET Core 创建 Web API
前端·asp.net·.net
一叶茶3 天前
前端生成docx文档、excel表格、图片、pdf文件
前端·javascript·react
xcLeigh4 天前
ASP.NET |日常开发中定时任务详解
jvm·oracle·asp.net
Anna_Tong4 天前
ASP.NET Core 与 Blazor:现代 Web 开发技术的全新视角
前端·后端·微软·asp.net·web·技术
qq_2518364574 天前
基于asp.net游乐园管理系统设计与实现
开发语言·前端·数据库·后端·asp.net
老牛源码4 天前
Y20030004基于asp.net+Sql的环保网站的设计与实现(附源码 调试 文档)
后端·asp.net
qq_2518364575 天前
asp.net多媒体教室管理系统VS开发sqlserver数据库web结构c#编程计算机网页项目
数据库·c#·asp.net
假装我不帅5 天前
asp.net repeater嵌套
后端·asp.net
走,板砖去5 天前
大文件传输与断点续传实现(极简Demo: React+Node.js)
node.js·react