非你网

ant design pro v5 在 /src/components/ 下暴露一些顶栏以及底栏的功能。可以在这里进行其功能定义。之前就说过，ant design pro 很多地方不完美，需要自己去打造和改变。

作为一个疯狂的极简的完美追求者， 打开 /src/components/RightContent/ 下的 index.tsx,删掉只剩下这么点东东了。

  return (
    <Space className={className}>
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
    </Space>
  );

然后就只剩下头像和昵称了。

删掉 /src/components/HeaderSearch 这个目录。如果需要什么，再自己扩展。删掉不需要的引用。

修改 Avatar，暴露出个人中心等 dropMenu。虽然暴露了，可没有对应的路由页面，点击是 404 。如果想关掉，去掉 menu 设置。如果想扩展 dropMenu 的功能，可以在 ./AvatarDropdown 里边修改逻辑。

<Avatar  menu={true} />

额外

如何利用 React Hooks API 做全局状态管理？

https://umijs.org/plugins/plugin-initial-state#loading

ant design pro 版本总是更新，总是没稳定下来。前段时间 v5 也出来了，和 v4 差别蛮大的。就样式来说，我更喜欢宽点的侧边栏，更喜欢将侧边栏伸缩按钮放在顶部。更喜欢暴露更多的 layout，去定义自己想要的。喜欢更简洁，更少的展示的元素。不是专业研究前端的，核心东西还是没深入。从零开始创建项目以及变更项目吧。

安装

yarn create umi

# 选择 ant design pro
# 选择 v5
# 等待下载

# 安装依赖包
yarn 

# 启动，先看看效果(默认样式太丑陋，兼职无语)
yarn start

# git 操作
git init
git add .
git commit -m 'ant-design-pro-v5-initialize'

到此， ant design pro v5 已经安装完成。但页面太丑陋，和曾经的页面完全不是一个样。页面丑陋是由 div 和 css 决定的。下边修改下配置，使得样式稍微好看一点。

继续阅读