react + antd：新建项目问题汇总

1. 新建项目命令

npm i @ant-design/pro-cli -g
pro create my-app

2. 菜单相关

• 去菜单国际化

config\defaultSettings.ts

menu: {
  locale: false,  
},

• 不展示菜单（单页面项目）

config\defaultSettings.ts

menuRender: false

• 修改左侧菜单栏宽度

config/config.ts

layout: {
  ...
  siderWidth: 50,
}

3. umi3 / umi4 下 request 的不同

• “umi”: “^3.5.0”,

import { request } from 'umi';

export const fetch = async (api, data, method) => {
  const info = {
    method,
    body: data,
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include',
  };

  if (method === 'get') {
    delete info.body;
  }
  return request(api, info);
};

• “@umijs/max”: “^4.1.1”

import { request } from '@umijs/max';

export const fetch = async (api, data, method) => {
  const info = {
    method,
    data, 
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include', // fetch request with cookies
  };

  if (method === 'get') {
    delete info.data;
  }
  return request(api, info);
};

4. 使用 :global 关键字修改 antd 组件样式

.custom-input {
  :global {
	.ant-input {
	  font-size: 12px;
	}
  }
}

5. eslint 报错 Parsing error: The keyword ‘import’ is reserved

增加 .eslintrc.js 文件

module.exports = {
  extends: [require.resolve("@umijs/fabric/dist/eslint")],
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
    REACT_APP_ENV: true,
  },
  rules: {
    "no-unused-vars": "warn",
  },
};