博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ant Desing Pro2.0(二)新增页面
阅读量:6785 次
发布时间:2019-06-26

本文共 1115 字,大约阅读时间需要 3 分钟。

1.参考资料

  1. 参考
  2. 参考

2.目录地址


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";// 引入lessimport styles from "./NewPage.less";class NewPage extends PureComponent {  render() {    return (      
HELLO WORD!
); }}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

转载地址:http://gudgo.baihongyu.com/

你可能感兴趣的文章
七周二次课(11月28日) 10.6 监控io性能 10.7 free命令 10.8 ps命令 10.9 查看网络状态 10.10 linux下抓包...
查看>>
源码包安装
查看>>
上那些酷炫的数据大屏_你猜是多久搞出来的?
查看>>
3999美元掀价格战,Velodyne宣布16线激光雷达降价50%
查看>>
java.lang.NoSuchMethodError问题分析
查看>>
Spring Ioc的实现----------用idea实现控制反转
查看>>
Java基础——变量
查看>>
跨域获取图片并自行上传保存
查看>>
Junit,Mockito,PowerMockito 进行单元测试
查看>>
要通过面试,Lamdba要了解多少?
查看>>
vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴
查看>>
PHP安装
查看>>
mysql用户管理-常用sql-数据库备份恢复
查看>>
springcloud应用程序上下文层次结构
查看>>
UI2Code智能生成Flutter代码--整体设计篇
查看>>
<java8>Java8 Optional 的使用
查看>>
教你怎样使用Spring Boot开发邮件系统?
查看>>
JAVA springboot微服务b2b2c电子商务系统 (五)springboot整合 beatlsql
查看>>
沙龙报名 | 探索新零售时代的数字化创新
查看>>
spring security中当前用户信息
查看>>