第一章初识Ant Design Pro

准备工作：
本地环境安装node git

安装
新建一个空的文件夹作为项目目录，并在目录中执行：
npm create umi

根据自己的项目需求选择对应的配置

image.png

npm install 安装依赖包文件

npm run start 启动程序

image.png

目录结构

image.png

调整Ant Design Pro基本配置

1.更好logo和名称

image.png

在config/defaultSettings.ts

export default {
//导航菜单主题 ‘light’ or ‘dark’
navTheme: 'dark',
primaryColor: '#1890ff', //图案的原色
layout: 'sidemenu', //导航菜单位置 'sidemenu' 和'topmenu'
contentWidth: 'Fluid', //布局’Fluid ‘or ’Fixed'
fixedHeader: false,
autoHideHeader: false,
fixSiderbar: false,
colorWeak: false,
menu: {
locale: true,
},
title: 'maomao', //项目名称
pwa: false,
iconfontUrl: '',
} as DefaultSettings;

image.png

图片更改去看组件的引用

image.png

2.清除头部不必要的小组件
在src/components/GlobalHeader/RightContent.tsx

image.png

3.更换地址栏图标

image.png