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

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

阅读 4.4k

一轮红日
一轮红日

哈哈

44 声望
4 粉丝
0 条评论
你知道吗?

哈哈

44 声望
4 粉丝
文章目录
宣传栏