[.Net Core][Antd] .NetCore Mvc + Antd 后台管理项目集成方法

1. 项目技术栈

  IDE:vs2019

  后端:.net core mvc spa

  前端:React, Ant design, umi

 

2.创建项目

选择Asp.net core web应用程序

[.Net Core][Antd] .NetCore Mvc + Antd 后台管理项目集成方法

 

 

选择创建React.js 模板

[.Net Core][Antd] .NetCore Mvc + Antd 后台管理项目集成方法

 

 

 项目创建完成后即可看到 ClientApp 前段代码文件夹,以及Startup.cs 中 配置app.UseSpa的方法

[.Net Core][Antd] .NetCore Mvc + Antd 后台管理项目集成方法

 

 

 

 需要注意的是,因为默认的配置UseReactDevelopmentServer,会在每次编译时执行,而antd 前端项目执行start 一次比较耗时,所以我通过proxy的方式进行请求转发,在ClientApp目录下单独执行npm start

 1 app.UseSpa(spa =>
 2             {
 3                 spa.Options.SourcePath = "ClientApp";
 4                 if (env.IsDevelopment()) {
 5                     spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");
 6                 }
 7 
 8                 //一下代码会在每次编译时执行
 9                 //if (env.IsDevelopment())
10                 //{
11                 //    spa.UseReactDevelopmentServer(npmScript: "start");
12                 //}
13             });

在ClientApp中,我们删除原有文件,并安装umi 框架,

参考 https://pro.ant.design/docs/getting-started-cn

yarn create umi

Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.
├── config                   # umi 配置,包含路由,构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

 

然后执行

npm install

npm start

 

需要注意的事,由于npm 访问速度较慢,我的方法是添加.npmrc 文件:

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

 

至此,在dotnet core 项目中集成antdesgin 的方法就完成了

 

上一篇:如何改变antd里面的默认样式


下一篇:Umi项目启动报错:Path must be a string.