ant.design pro中后台平台学习之路(1)

Admin 2019-09-27 PM 1386℃ 0条

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': '大鹏博客表单页',
}
标签: antd, antd pro

非特殊说明,本博所有文章均为博主原创。

评论啦~


选择表情
×