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

vboy1010 发布于2019-08-23 15:41 / 1733人阅读

摘要：配置路由在行新增如下内容这行是新增的内容做完如上步骤其实功能是完成了，但是版本中加入了菜单国际化中。所以你刚刚的页面如下这不是我们想要的效果，让我在进行修改修改在行新增如下内容新增菜单新增页面查看效果运行效果让我做一道连线题把

1.参考资料

参考ant design pro

参考DvaJs

2.目录地址

Ant Desing Pro2.0(一)项目初始化

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

Ant Desing Pro2.0(三)设置代理

Ant Desing Pro2.0(四)与服务端交互

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 (
      
        
          HELLO WORD!
        
      
    );
  }
}

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"
      }
    ],
  },
  ![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让我做一道连线题把

私有云海外云主机 Desing Ant jenkins ant android ant

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102437.html

Ant Desing Pro2.0(一)项目初始化

摘要：写在前面最近做毕设的时候发现网络上关于版本的基础入门资料太少，我一个后端开发人员当时入门也是跌跌撞撞，现在我将我所学的分享出来，避免大家少走一些弯路。 1.写在前面最近做毕设的时候发现网络上关于ant designpro2.0版本的基础入门资料太少，我一个后端开发人员当时入门也是跌跌撞撞，现在我将我所学的分享出来，避免大家少走一些弯路。 2.开发环境你的本地环境需要安装 node ...

BigNerdCoding 2019-08-23 15:41 评论0 收藏0
Ant Desing Pro2.0(三)设置代理

摘要：参考资料参考参考目录地址一项目初始化二新增页面三设置代理四与服务端交互修改文件在将行和行的注释打开代理前缀，请求格式资源地址将所有以开头的所有路由都代理到目标地址代理目标地址是否跨域访问最终请求时候忽略掉举个例子吧有个接口请求之后会返回 1.参考资料参考ant design pro 参考DvaJs 2.目录地址 Ant Desing Pro2.0(一)项目初始化 Ant D...

Lycheeee 2019-08-23 15:42 评论0 收藏0
ant design pro 新增页面

摘要：新增页面参考资料由于版本升级到所以重新做了一个分享，下面是目录地址一项目初始化二新增页面三设置代理四与服务端交互在下面的任意一个文件夹下面创建一个页面填写如下内容内容这是新页面内容将刚刚写的组件注册到路由里面，修改文件内容内容新页面添加后的 ant design pro 新增页面 ps:参考资料 1.ant design pro 2.由于pro版本升级到2.0,所以重新做了一个分享...

asoren 2019-08-22 16:44 评论0 收藏0
Ant Desing Pro2.0(四)与服务端交互

摘要：创建在新建文件填入以下代码导入接口文件，并采用解构的方式，将的文件里面的赋值给这里的是储存数据的地方，收到以后，会更新数据。我的理解其实是支付宝的框架传送门 1.参考资料参考ant design pro 参考DvaJs 2.目录地址 Ant Desing Pro2.0(一)项目初始化 Ant Desing Pro2.0(二)新增页面 Ant Desing Pro2.0(三)...

zhunjiee 2019-08-23 15:44 评论0 收藏0
Ant Design Pro用小乌龟版的git提交时报错

摘要：提交报错描述刚下载好的修改后，准备提交发现报如下错误，原因是引用做和脚本做和的语法纠正。 1.Ant Desing Pro git提交报错 1.1. 描述：刚下载好的ant design pro修改后，准备提交发现报如下错误， 1.2. 原因：是Ant Desing Pro 引用eslint做和stylelintrc脚本做js和css的语法纠正。而在每次git提交的时候触发这个脚本...

source 2019-08-22 16:42 评论0 收藏0