ant.design pro中后台平台学习之路（1）

ant.design pro中后台平台学习之路（1）

公司需要创建重构一个后台管理平台，这么好的学习机会必须给Ta安排一波，废话少说，走起！

一. 项目创建

第一步，首先新建一个文件夹，使用管理员身份打开cmd窗口，执行ant.design pro脚手架工具安装命令，

以下均已yarn为例，没有yarn工具可使用npm代替

yarn create umi

提示 ？Select the boilerplate type（选择样板类型），我们选择: ant-design-pro

 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

提示? Which language do you want to use? (你想用哪种语言), 我们选择TypeScript

❯ TypeScript 
  JavaScript 

Ant Design Pro 脚手架将会自动安装。

项目生成的目录结构如下

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

二. 安装依赖文件，启动项目
打开文件夹，继续执行下面的步骤，然后安装项目依赖文件（需要已安装Node环境）

yarn install

安装时间与网速有关，大概需要十几分钟时间，安装完成后，执行start运行工程

yarn start

项目启动后，会自动运行项目

三. 增加两个页面，Home和 Roc

首先打开src下的pages文件夹，新建文件Homes.tsx ,

Homes.tsx

import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

export default () => {
  return (
    <PageHeaderWrapper>
      {
        <div>大鹏博客首页</div>
      }
    </PageHeaderWrapper>
  );
};

然后在pages文件夹下，新建文件夹 roc，在roc文件夹中再新建 List 文件夹 和 Form 文件夹，

分别在List和Form中新建 index.tsx。

Form ——> index.tsx

import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

export default () => {
  return (
    <PageHeaderWrapper>
      {
        <div>Form页面</div>
      }
    </PageHeaderWrapper>
  );
};

List ——> index.tsx

import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

export default () => {
  return (
    <PageHeaderWrapper>
      {
        <div>List页面</div>
      }
    </PageHeaderWrapper>
  );
};

四. 修改菜单列表，固定Header和侧边菜单，下滑时隐藏Header

1.修改菜单列表

打开根目录下，config ——>config.ts ，找到100行（脚手架版本不同，位置可能不一致）

{
      path: '/',
      component: '../layouts/SecurityLayout',
      routes: [
        {
          path: '/',
          component: '../layouts/BasicLayout',
          authority: ['admin', 'user'],
          routes: [
            {
              path: '/',
              redirect: '/welcome',
            },
            {
              path: '/welcome',
              name: 'welcome',
              icon: 'smile',
              component: './Welcome',
            },
            {
              component: './404',
            },
          ],
        },
        {
          component: './404',
        },
      ],
    },

修改为

{
      path: '/',
      component: '../layouts/SecurityLayout',
      routes: [
        {
          path: '/',
          component: '../layouts/BasicLayout',
          authority: ['admin', 'user'],
          routes: [
            {
              path: '/',
              redirect: '/homes',
            },
            {
              path: '/homes',
              name: 'homes',
              icon: 'smile',
              component: './homes',
            },
            {
              path: '/roc',
              name: 'roc',
              icon: 'smile',
              routes: [
                {
                  name: 'list',
                  icon: 'smile',
                  path: '/roc/list',
                  component: './roc/List',
                },
                {
                  name: 'form',
                  icon: 'eye',
                  path: '/roc/form',
                  component: './roc/Form',
                },
              ]
            },
            {
              component: './404',
            },
          ],
        },
        {
          component: './404',
        },
      ],
    },

1. 固定Header和侧边菜单，下滑时隐藏Header

打开config——> defaultSettings.ts 文件，找到45行，配置信息导出

export default {
  navTheme: 'dark',
  primaryColor: '#1890FF',
  layout: 'sidemenu',
  contentWidth: 'Fluid',
  fixedHeader: false,
  autoHideHeader: false,
  fixSiderbar: false,
  colorWeak: false,
  menu: {
    locale: true,
  },
  title: 'Ant Design Pro',
  pwa: false,
  iconfontUrl: '',
} as DefaultSettings;

修改 fixedHeader 、autoHideHeader 、fixSiderbar 为 True, 结果如下：

export default {
  navTheme: 'dark',
  primaryColor: '#1890FF',
  layout: 'sidemenu',
  contentWidth: 'Fluid',
  fixedHeader: true,
  autoHideHeader: true,
  fixSiderbar: true,
  colorWeak: false,
  menu: {
    locale: true,
  },
  title: '大鹏博客',
  pwa: false,
  iconfontUrl: '',
} as DefaultSettings;

五： 处理注册模板报错信息

最后处理一下控制台中的语言报错信息，这个报错信息是注册模板报错

[React Intl] Missing message: "menu.roc" for locale: "zh-CN", using default message as fallback.

[React Intl] Missing message: "menu.roc.form" for locale: "zh-CN", using default message as fallback.

打开src —> locales —> zh-CN —> menu.ts 文件，在下面增加配置即可。

export default  {
  'menu.homes': '大鹏博客',
  'menu.roc': '大鹏博客',
  'menu.roc.list': '大鹏博客列表页',
  'menu.roc.form': '大鹏博客表单页',
}