001-pro ant design 升级2.0后变更

一、更新点

1、目录调整

2、本地代理服务器调整

roadhog→umi

配置方式

在这个config/config.js配置

"proxy": { "/api": { "target": "http://jsonplaceholder.typicode.com/", "changeOrigin": true, "pathRewrite": { "^/api" : "" } } }

在config/config.js文件中，最上面提示： https://umijs.org/config/ 查看这里的配置应该都可以配置到这里

3、路由菜单方式

4、routes变为pages

5、pages中含有models

二、新建页面

1、在/config/router.config.js文件中添加

      {
        path: '/newpage',
        name: 'newpage',
        icon: 'dashboard',
        routes: [
          {
            path: '/newpage/page1',
            name: 'page1',
            component: './Newpage/Page1',
          },
        ],
      },

2、添加实际页面

在src的pages下增加Newpage，并且在Newpage中添加

import React, {Component} from 'react';
import {connect} from 'dva';
import {formatMessage, FormattedMessage} from 'umi/locale';
import {
  Row,
  Col,
  Icon,
  Card,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
} from 'antd';
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from '@/components/Charts';
import Trend from '@/components/Trend';
import NumberInfo from '@/components/NumberInfo';
import numeral from 'numeral';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import Yuan from '@/utils/Yuan';
import {getTimeDistance} from '@/utils/utils';
 
@connect(({page1, loading}) => ({
  page1,
  loading: loading.effects['page1/fetch'],
}))
class Page1 extends Component {
  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: 'page1/fetch',
    });
  }
 
  render() {
    const {page1} = this.props;
    console.log(page1)
    alert(page1);
    return (
      <GridContent>
        <Row gutter={24}>
          <Col>
            test
          </Col>
        </Row>
      </GridContent>
    );
  }
}
 
export default Page1;

3、添加国际化

在/src/locales下的两个文件中添加对应的Key

  'menu.newpage': '心页面',
  'menu.newpage.page1': '页面1',