本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
如果你使用 React，并且想用他做个后台系统，或是自己的博客，那么我在这推荐一个非常 nice 的框架：Ant Design Pro V5
其实这套框架要求使用的技术还是蛮高的，采用 react(Hook函数式编程） + ts + ant design + ProComponents + umi + dva + ant design Chart 等，这里附上一张官网的图
当然，看到这么多前沿的技术不要畏惧，如果你刚接触，想要了解，本文的目的也是帮助你更快的了解这个框架， 接下来让我们来详细聊聊吧~
另外，我也用此框架搭建了一个小博客，在这里附上我的Github地址，有兴趣的小伙伴一定不要吝惜你的 Star~
gitHub地址：Ant Design Pro V5
聊聊V4与V5
有使用过 Ant Design Pro 的小伙伴，应该都是从 V4 入手的，现在到了 V5，到底升级了那些呢？感兴趣的小伙伴可以看看官网 Ant Design Prp 官网
从目录结构上来看 V5 要比 V4 的结构更加清晰，简单明了~
V5 相对于 V4 在本人看来最大的改变有两点：
- 编程模式改变：由 class 编程，改为 Hook（函数式）编程， 为啥这么说呢？因为 V5 主推数据流 useModel 和请求 useRequest,这真是迫不及待的更新技术(●￣(ｴ)￣●)
- 数据流，数据流一直是一个大点，只要是接触前端的小伙伴应该多少都听过 redux，然后是 mobx，到 dva，其他的不说，单从操作上简化了不是一星半点，而在 V5 上更是升级了 V4 的 dva，可以毫不夸张的说 V5的数据流简直就是 傻瓜式操作，连动脑子的时间都省了
话不多说，让我们直接揭开 Ant Design Pro V5 的神秘面纱吧~
配置指南
1、更换名称、logo、主题颜色等
在开发之前我们首先要把名称、logo、主题颜色进行修改，那么该如何修改呢
位置 \config\defaultSetting.js
import { Settings as LayoutSettings } from '@ant-design/pro-layout';
const Settings: LayoutSettings & {
pwa?: boolean;
} = {
navTheme: 'dark', // 主题颜色
primaryColor: '#1890ff', //颜色
layout: 'side', // 菜单模式 side：右侧导航，top：顶部导航
contentWidth: 'Fluid', // 内容模式 Fluid：自适应，Fixed：定宽 1200px
fixedHeader: false, // 是否固定头部
fixSiderbar: true, // 是否固定导航
colorWeak: false,
// headerRender: false, // 是否拥有头部
// menuRender: false, // 是否拥有菜单
title: 'Domesy',
pwa: false,
iconfontUrl: '', //icon
};
export default Settings;
2、跟换icon
这是一个小细节，需要去稍微改动
我们需要将项目的小图标做替换即可， 有的时候替换后没有效果，是因为缓存的问题，我们只需要重新启动下浏览器，或是本地服务即可
位置 /public/favicon.ico
3、清除头部小组件或是修改
我们看到在原本的上面有 全局搜索、使用文档、消息提示、国际化，这时我们可以根据自己的需求去做清楚或是修改
位置： src/components/RightContent
搜索框位置：src/components/HeaderSearch
消息通知：src/components/NoticeIcon
头像： src/components/RightContent/AvatarDropdown
4、加载页面
我们在启动整个项目的时候、或者在刷新的时候会出现一个加载页面，这个页面的位置在 src\pages\document.ejs 中。他在基础上使用了图片，可以进行修改，换成项目的名称和加载图片
5、去除水印
我们可以全局设置自己的水印，或者取消，那么这些在哪里配置呢
位置 /src/app.tsx
为了简便期间我在这个做了些全局配置，可直接更改 不用去懂 app.tsx 的代码
6、修改页脚
要想每个页面都有页脚，我们只需要更改 /src/component/Footer 即可
7、全局公共配置组件
当我们要在自己的项目中写入广告或评论时，我们希望有一个公共的组件，在每个页面都有显示，例如
这个组件，我们该如何配置呢？
位置 /src/app.tsx 下的 layout 的 childrenRender 这个属性配置
但要注意一点，这个属性是所有的页面，包括登录页面，所以我们需要做些额外的配置
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
return {
...
childrenRender: (dom) => {
return (
<>
{dom}
{dom.props?.location?.pathname !== '/user/login' && <LiveSetting />}
</>
)
},
...
}
}
8、分模块打包
在我们的日常开发中，往往会有多个环境，一般的都是测试环境和线上环境，当然环境对于前端而言是接口的域名地址等，如果每次要发环境控制一个变量去改变地址，或者监听地址等操作太过麻烦，那么我们可以通过命令来改变打包的环境
那么改在哪里配置呢？
位置： /package.json
{
...
"scripts": {
...
"build:pre": "cross-env REACT_APP_ENV=pre umi build",
...
}
}
加上这段话即可，简单的介绍一下
build:pre 它就打包命令，使用跟普通的打包命令一样 yarn run build:pre
REACT_APP_ENV 就是我们区别到底是哪个环境的
cross-env 这个主要是处理 windows 的，如果不加，windows 是无法正常打包的
那么有小伙伴问了，我在这里改完如何更换地址呢
我在 src/utils/config.ts 下做了个简单配置就行了
let host = 'http://www.domesy.cn:8081';
if (REACT_APP_ENV === 'pre') {
host = 'http://www.domesy.cn:8083';
}
export { host };
我们只要在请求的时候引入 host 即可
9、全局配置LayOut文件
首先说说为什么要这个全局配置，首先我们直接更改上面的代码也是可以的，但我想要像 config常用的配置提出来，方便后续的修改和其他项目的使用，所以变有了这个文件
位置：/src/utils/Setting/layoutSy
目前设有 logo、是否显示底部Footer、水印、面包屑、是否隐藏小按钮等操作
interface LayoutProps {
logo: React.ReactNode; // 设置logo
footer: boolean; //底部按钮，为true展示Footer组件
waterMark: false | string | WaterMarkProps; //水印，false关闭，string 设置内容，对象时，满足水印的需求
rightContent: 'breadcrumb' | WithFalse<(props: any) => React.ReactNode>; // 导航页右侧设置，为false时不设置，为 breadcrumb' 展开面包屑设置， 其余支持原有的rightContentRender属性
HeaderClick: ( (e:any) => void ) | false; //点击头部方法,为false时，默认点击后跳到首页
hiddenSearch: boolean; // 是否隐藏搜索按钮
hiddenQuest: boolean; // 是否隐藏问题跳转
}
10、 跟改为hash模式
总所周知，地址栏模式分为 hash 和 history 模式，从最直观的看就是 hsah 模式 会比 history 模式 多一个 #/ 具体详细的区别在这就不讨论了，我们来说说为什么要配置 hsah 模式
当我们开发完后台，部署到服务器上，我们会发现一个问题就是，子页面刷新会导致404，大致意思就是当页面进行跳转后，在进行强制刷新，这是浏览器就回报 404 找不到改路径
这时就需要通过配置 nginx ，使其指向index.html 就可以
那么，如果不配置 nginx 可不可以实现呢？ 当然是可以的， 也就是将 history 换为 hash 模式就行了~
在Ant Design Pro 中如何配置？其实非常简单，就能迅速配置为hash模式了
在 config/config.ts 中配置就可以了
export default defineConfig({
history:{
type: 'hash'
},
hash: true,
...
})
11.其余配置
除此之外，模板里也提供了直接修改的地方
文件位置：config/defaultSettings.ts
import { Settings as LayoutSettings } from '@ant-design/pro-layout';
const Settings: LayoutSettings & {
pwa?: boolean;
} = {
navTheme: 'dark', // 主题颜色
primaryColor: '#1890ff', //颜色
layout: 'side', // 菜单模式 side：右侧导航，top：顶部导航
contentWidth: 'Fluid', // 内容模式 Fluid：自适应，Fixed：定宽 1200px
fixedHeader: false, // 是否固定头部
fixSiderbar: true, // 是否固定导航
colorWeak: false,
// headerRender: false, // 是否拥有头部
// menuRender: false, // 是否拥有菜单
title: 'Domesy',
pwa: false,
iconfontUrl: '', //icon
};
export default Settings;
到这 关于 Ant Design Pro V5 的基础配置就讲完了，如果对 Ant Design Pro 感兴趣的伙伴，快去试试吧~
另外，以上只是本人的个人关点，有任何说的不对的地方，欢迎在评论区留言指出，感谢(●￣(ｴ)￣●)~
Ant Design Pro V5 五大模块的配置使用请查看 打造属于你的Ant Design Pro V5（二）
关于 Ant Design Pro V5 工作流程请看 打造属于你的Ant Design Pro V5（三）
其他文章：
