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

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

clipboard.png

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;

clipboard.png

// 这是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)

clipboard.png

2.2 做完如上步骤其实功能是完成了,但是pro 2.x版本中加入了菜单国际化中。所以你刚刚的页面如下

clipboard.png

这不是我们想要的效果,让我在进行修改修改
在src->locales->zh-CN->menu.js->『11行新增如下内容』


'menu.newPage': '新增菜单',
'menu.newPage.newPage': '新增页面',

clipboard.png

3.查看效果

3.1运行效果

clipboard.png

3.2让我做一道连线题把

clipboard.png

你可能感兴趣的

载入中...