ant design pro 新增页面

asoren 发布于2019-08-22 16:44 / 3309人阅读

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

ant design pro 新增页面

ps:参考资料
1.ant design pro

2.由于pro版本升级到2.0,所以重新做了一个分享，下面是目录地址

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

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

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

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

1.在 src/routes/ 下面的任意一个文件夹下面创建一个页面

// 填写如下内容

/** NewPage.js内容 */
import React, { Component } from "react";

export default class NewPage extends Component {
  render() {
    return (
      
        这是新页面
      
    )
  }
}

/** NewPage.less内容 */
@import "~antd/lib/style/themes/default.less";

2.将刚刚写的组件注册到路由里面，修改 src/common/router.js文件

/** src/common/router.js内容 */
 "/newPage":{
      component:dynamicWrapper(app,["monitor"],()=> import("../routes/User/NewPage")),
  },


/** src/common/menu.js内容*/
  {
    name:"新页面",
    icon: "table",
    path:"newPage",
  },

添加后的效果
src/common/router.js

src/common/menu.js

3.运行结果

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

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

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

摘要：配置路由在行新增如下内容这行是新增的内容做完如上步骤其实功能是完成了，但是版本中加入了菜单国际化中。所以你刚刚的页面如下这不是我们想要的效果，让我在进行修改修改在行新增如下内容新增菜单新增页面查看效果运行效果让我做一道连线题把 1.参考资料参考ant design pro 参考DvaJs 2.目录地址 Ant Desing Pro2.0(一)项目初始化 Ant Desing...

vboy1010 2019-08-23 15:41 评论0 收藏0
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 - 实践React Hooks - 页面

摘要：背景目前是社区最炙手可热的新技术，我们准备追一下热度，在当前的项目中实践一下技术。我们的项目使用的脚手架是，初步想法是把现有的一个有状态页面组件重构成函数组件。存放表单值的状态是声明在列表组件，传给表单组件。背景 React Hooks目前是React社区最炙手可热的新技术，我们准备追一下热度，在当前的项目中实践一下Hooks技术。我们的项目使用的脚手架是Ant Design P...

wangbjun 2019-08-26 10:30 评论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