乐趣区

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

参考资料
[1.ant design pro][1]

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”
}
],
},

3. 查看效果

退出移动版