1. 項目技術棧
IDE：vs2019
后端：.net core mvc spa
前端：React, Ant design, umi
2.創建項目
選擇Asp.net core web應用程序
選擇創建React.js 模板
項目創建完成后即可看到 ClientApp 前段代碼文件夾，以及Startup.cs 中 配置app.UseSpa的方法
需要注意的是，因為默認的配置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 的方法就完成了