Azure + React + ASP.NET Core 项目笔记一：项目环境搭建（一）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Azure + React + ASP.NET Core 项目笔记一：项目环境搭建（一）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前提条件

安装dotnet core sdk
安装Node.js + npm

选择喜欢的位置新建文件夹，~~然后开始摸鱼~~ 然后进行下一步

在终端或cmd中直接运行

cd yourProjectAddress
dotnet new react

VS Code 如下图
Azure + React + ASP.NET Core 项目笔记一：项目环境搭建（一）,全栈项目,asp.net,react

我们新初始化的项目并没有安装包，特别是前端部分，所以需要先安装

cd ClientApp
npm install #按照package.json安装
# 另外也可以使用以下语句单独安装
npm install <package_name>

使用以下语句运行

npm start

顺利的话会出现这样的结果
Azure + React + ASP.NET Core 项目笔记一：项目环境搭建（一）,全栈项目,asp.net,react
之后点开跳转到网页看看
可能会出现这种情况

点击Advanced，再点击Proceed前往就行

看到这样的网页就算完成了

右键新建文件夹src，然后把.Net的一些文件挪过去
Azure + React + ASP.NET Core 项目笔记一：项目环境搭建（一）,全栈项目,asp.net,react
之后在src同级目录下运行，创建解决方案

dotnet new sln

之后会出现项目名.sln
Azure + React + ASP.NET Core 项目笔记一：项目环境搭建（一）,全栈项目,asp.net,react

dotnet sln add src/yourProject.csproj

将项目“yourProject.csproj”添加到解决方案中。
之后编辑src/yourProject.csproj

替换SpaRoot 这行，改变目录，因为文件位置改了

<SpaRoot>..\ClientApp\</SpaRoot> #new
<SpaRoot>ClientApp\</SpaRoot> #old

最后尝试一下打包

dotnet build

没有报错就算完成了
Azure + React + ASP.NET Core 项目笔记一：项目环境搭建（一）,全栈项目,asp.net,react

如果有帮助到你，点个赞吧！！！文章来源地址https://www.toymoban.com/news/detail-700296.html

到了这里，关于Azure + React + ASP.NET Core 项目笔记一：项目环境搭建（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！