ant-design-pro v5 入门

### 新建项目

```shell
npx create-umi my-application-name
```

执行这个命令后，会出现选项，第一个选 ant-design-pro，第二个选 TypeScript 第三个选 complete

### 安装依赖并启动

```
npm install
npm run start
```

这里只能用 npm run start，npm run dev 没法登录，npm run start 修改了环境变量。

### 修改主题

主题信息在 config/defaultSettings.ts 文件里，我改为了如下：

```typescript
import { Settings as LayoutSettings } from '@ant-design/pro-layout';

const Settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: "light",
  primaryColor: "#F5222D",
  //primaryColor: '#1890ff',
  layout: "side",
  contentWidth: "Fluid",
  fixedHeader: false,
  fixSiderbar: true,
  title: "",
  pwa: false,
  iconfontUrl: "",
  logo: 'https://cdn.kpromise.top/joyy/logo.png'
};

export default Settings;
```

### 禁用 MFSU

config/config.ts 文件里有这么一行 `mfsu: {},` 将其注释或者删除，这货和 setting-drawer 不兼容，没法使用 setting-drawer 我的建议是，如果你需要用 setting-drawer 那么，禁用 MFSU，实际开发中，建议开启 MFSU，速度的确快。

### 主题颜色很少

```
npm install umi-plugin-antd-theme --save-dev
npm install
```

执行完第一个命令后，需要执行第二个，感觉是 bug

### 修改左上角 logo 大小

src/global.less 里添加

```css
#root .ant-pro-sider-logo img {
  display: inline-block;
  height: 28px;
  vertical-align: middle;
}
```

请注意 #root 它是关键，其余 css 修改也可以参考这个。

### 修改 footer

修改 src/components/Footer/index.tsx 如下：

```
import { DefaultFooter } from '@ant-design/pro-layout';

export default () => {

return (
    <DefaultFooter
      copyright={`${new Date().getFullYear()} SHOPLINE Limited.`}
      links={[
      ]}
    />
  );
};
```

### 修改右上角内容

修改 src/components/RightContent 里的内容即可。

### 修改左侧菜单

菜单在 config/config.ts 里面，左下侧的链接在 src/app.tsx 里面。