ant design pro （四）新增頁面

1、概述

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

　　這裏的『頁面』指配置了路由，可以經過連接直接訪問的模塊，要新建一個頁面，一般只須要在腳手架的基礎上進行簡單的配置。

2、開發步驟

2.一、新增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.二、將文件加入菜單和路由

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

路由配置：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.三、新增 model、service

佈局及路由都配置好以後，回到以前新建的 NewPage.js，能夠開始寫業務代碼了！若是須要用到 dva 中的數據流，還須要在 src/models src/services 中創建相應的 model 和 service，具體能夠參考腳手架內置頁面的寫法。

3、頁面加載過程