Ant Design Pro 项目笔记

本文不是详细的操作教程，官方教程已经很详细，还是看官方教程。
本文主要是记录学习使用 Ant Desgin Pro 碰到的重要节点。[不定期更新]

Ant Design React 和 Ant Design Pro 有什么区别？#

可以理解为 Ant Design React 是一套 React 组件库，而 Pro 是使用了这套组件库的完整前端脚手架。

Ant Design （组件库）了解

官方 https://ant.design/docs/react/introduce-cn
先了解有哪些组件，有个印象

Ant Design Pro 学习

官方 https://pro.ant.design/

1. 对Ant Design Pro 有个印象，看官方的Demo https://preview.pro.ant.design/

2. 入门教程
   https://pro.ant.design/docs/getting-started-cn

3. 本地创建 Demo 的项目

• 创建项目（详细教程见官方，以下不再赘诉）
• 下载依赖
• 添加所有的示例（区块），具体看 https://pro.ant.design/docs/block-cn

npm create umi
npm install
npm run fetch:blocks # 添加所有的示例（区块）

接口请求

使用默认的 umi-request，使用教程见 npm首页
项目中路径 /src/utils/request.js
修改请求的前缀（服务器地址）

# request.js
const httpServer = 'http://host:port/api'; # 增加
# ... 其他代码
/**
 * 配置request请求时的默认参数
 */
const request = extend({
  prefix: httpServer, # 增加
  errorHandler, // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
});

服务器地址，实际应用时候会做开发、生产环境的配置

const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env;
const devConfigs = {
  httpServer: 'http://dev.com/api'
};
const proConfigs = {
  httpServer: 'http://pro.com/api'
};

const configs = ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ? proConfigs : devConfigs;

# ... 其他代码
/**
 * 配置request请求时的默认参数
 */
const request = extend({
  prefix: configs.httpServer, # 增加
  errorHandler, // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
});