ant design pro （四）新增頁面

一、概述

　　參看地址：https://pro.ant.design/docs/new-page-cn

　　這里的『頁面』指配置了路由，能夠通過鏈接直接訪問的模塊，要新建一個頁面，通常只需要在腳手架的基礎上進行簡單的配置。

二、開發步驟

2.1、新增js、less文件

　　在 src/routes 下新建頁面的NewPage.js 及 NewPage.less 文件，如果相關頁面有多個，可以新建一個文件夾來放置相關文件。

　　樣式文件默認使用 CSS Modules，如果需要，你可以在樣式文件的頭部引入 antd 樣式變量文件：

@import "~antd/lib/style/themes/default.less";

　　這樣可以很方便地獲取 antd 樣式變量並在你的文件里使用，有利於保持頁面的一致性，也方便實現定制主題。

其中NewPage.js中添加

import React, {Component} from 'react';
import {Link} from 'dva/router';
// import styles from './NewPage.less';

export default class NewPage extends Component {

  render() {
    return (
      <div>
        頁面內容
      </div>
    );
  }
}

2.2、將文件加入菜單和路由

　　加入菜單和路由的方式請參照 路由和菜單 - 添加路由/菜單 中的介紹完成。

路由配置：src/common/router.js

'/new': {
  component: dynamicWrapper(app, [], () => import('../routes/NewPage')),
},

菜單配置：src/common/menu.js

{
  name: '新頁面',
  icon: 'table',
  path: 'new',
},

加好后，訪問 http://localhost:8000/#/new 就可以看到新增的頁面了。

2.3、新增 model、service

布局及路由都配置好之后，回到之前新建的 NewPage.js，可以開始寫業務代碼了！如果需要用到 dva 中的數據流，還需要在 src/models src/services 中建立相應的 model 和 service，具體可以參考腳手架內置頁面的寫法。

三、頁面加載過程