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让我做一道连线题把