1.参考资料
- 参考
- 参考
2.目录地址
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";// 引入lessimport styles from "./NewPage.less";class NewPage extends PureComponent { render() { return (); }}export default NewPage; HELLO WORD!
// 这是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让我做一道连线题把