Ant Desing Pro2.0(二)新增頁面

1.參考資料

1. 參考ant design pro
2. 參考DvaJs

2.目錄地址

1. Ant Desing Pro2.0(一)項目初始化
2. Ant Desing Pro2.0(二)新增頁面
3. Ant Desing Pro2.0(三)設置代理
4. Ant Desing Pro2.0(四)與服務端交互

---

1.新增頁面

1.1 在src->pages->『新建文件夾』NewPage->『新建js文件』NewPage.js 和 『新建less文件』NewPage.less

1.2填入以下代碼

---

// 這是NewPage.js內容
import React, { PureComponent } from "react";
//麪包屑
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
// 引入less
import styles from "./NewPage.less";

class NewPage extends PureComponent {
  render() {
    return (
      <PageHeaderWrapper>
        <div>
          HELLO WORD!
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default NewPage;

---

// 這是NewPage.less內容
//樣式文件默認使用 CSS Modules，若是須要，你能夠在樣式文件的頭部引入 antd 樣式變量文件：
//這樣能夠很方便地獲取 antd 樣式變量並在你的文件裏使用，有利於保持頁面的一致性，也方便實現定製主題。
@import "~antd/lib/style/themes/default.less";

---

2.配置路由

2.1 在config->router.config.js->『47行新增以下內容』

---

// 這行是新增的內容
  {
    path: "/newPage",
    icon: "file",
    name: "newPage",
    routes: [
      {
        path: "/newPage/newPage",
        name: "newPage",
        component: "./NewPage/NewPage"
      }
    ],
  },
  ![clipboard.png](/img/bVbppqB)

2.2 作完如上步驟其實功能是完成了，可是pro 2.x版本中加入了菜單國際化中。因此你剛剛的頁面以下

這不是咱們想要的效果，讓我在進行修改修改
在src->locales->zh-CN->menu.js->『11行新增以下內容』

---

'menu.newPage': '新增菜單',
'menu.newPage.newPage': '新增頁面',

---

3.查看效果

3.1運行效果

3.2讓我作一道連線題把