antdesign 新增页面_ant design pro (四)新增页面
一、概述
这里的『页面』指配置了路由,能够通过链接直接访问的模块,要新建一个页面,通常只需要在脚手架的基础上进行简单的配置。
二、开发步骤
2.1、新增js、less文件
在 src/routes 下新建页面的NewPage.js 及 NewPage.less 文件,如果相关页面有多个,可以新建一个文件夹来放置相关文件。
样式文件默认使用 CSS Modules,如果需要,你可以在样式文件的头部引入 antd 样式变量文件:
@import "~antd/lib/style/themes/default.less";
这样可以很方便地获取 antd 样式变量并在你的文件里使用,有利于保持页面的一致性,也方便实现定制主题。
其中NewPage.js中添加
import React, {Component} from 'react';
import {Link} from 'dva/router';
// import styles from './NewPage.less';
export default class NewPage extends Component {
render() {
return (
页面内容
);
}
}
2.2、将文件加入菜单和路由
加入菜单和路由的方式请参照 路由和菜单 - 添加路由/菜单 中的介绍完成。
路由配置:src/common/router.js
'/new': {
component: dynamicWrapper(app, [], () => import('../routes/NewPage')),
},
菜单配置:src/common/menu.js
{
name: '新页面',
icon: 'table',
path: 'new',
},
加好后,访问 http://localhost:8000/#/new 就可以看到新增的页面了。
2.3、新增 model、service
布局及路由都配置好之后,回到之前新建的 NewPage.js,可以开始写业务代码了!如果需要用到 dva 中的数据流,还需要在 src/models src/services 中建立相应的 model 和 service,具体可以参考脚手架内置页面的写法。
三、页面加载过程
antdesign 新增页面_ant design pro (四)新增页面相关推荐
- ps2020的antlib文件在哪_ant design pro 新增页面
ant design pro 新增页面 2.由于pro版本升级到2.0,所以重新做了一个分享,下面是目录地址 1.在 src/routes/ 下面的任意一个文件夹下面创建一个页面 // 填写如下内容 ...
- ant design pro 加载慢_ant design pro项目打包后页面加载缓慢
用ant design pro框架做的项目,打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImp ...
- antdesign 柱状图_ant design pro (十)advanced 图表
一.概述 Ant Design Pro 提供了由设计师精心设计抽象的图表类型,是在 BizCharts 图表库基础上的二次封装,同时提供了业务中常用的图表套件,可以单独使用,也可以组合起来实现复杂的展 ...
- ant design pro模板_Ant Design Pro 学习笔记
学习笔记 摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
- 23 版本以上的v4包_Ant Design Pro V2升级到V4 小结
前言 前不久接手过一个历史悠久的项(shi)目(shan),技术栈之复杂(混乱)令我潸然泪下:你甚至可以在一个项目里使用前端三大框架(Angular1, Vue, React). 三份的代码,本应该给 ...
- ant design pro模板_Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
- ant design pro模板_ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续 ...
- ant design 预览图片_Ant Design Pro上传图片
Ant Design Pro上传图片 今天看了下Ant Design Pro上传图片的插件,感觉挺简单,也没有遇到太多问题,分享个大家!顺便记录下. 这里有个坑,主要文件命名的时候不要和保留关键词同名 ...
- 7nfs客户端没权限_Ant design pro v4-服务器菜单和路由权限控制
要解决的问题:ant design pro默认情况下,菜单和路由都用配置的方式,在前端的config/config.ts中配置.但是大多数后台系统都需要由后端服务器控制权限. 类似的需求一般包括两点: ...
最新文章
- 介绍一款 API 敏捷开发工具,告别加班!
- 就业丨速成班出来的AI人才,老板到底要不要?
- BNU 26349——Cards——————【区间dp】
- PLSQL 执行 for update 语句被锁定的解决办法
- Java中number数字类型的转换_Java下数字类型的转换 (转)
- git安装-centos版
- Tomcat9版本不支持jsp处理PUT,DELETE之外的请求的解决方案(405方法不允许)
- 如何开启MySQL的慢查询日志
- bzoj 3394: [Usaco2009 Jan]Best Spot 最佳牧场(floyd)
- Windows服务器时间同步设置大比拼
- 计算机课程新讨论话题,信息技术组内主题讨论-.DOC
- 我是一只IT小小鸟(转载)
- Java——单例模式:饿汉、懒汉模式
- 凯利讯分享ECL电路与TTL电路的使用注意事项
- 鲁豫有约怎么下载,怎么实现qlv转MP4
- 百度网盘 http://pandownload.com/index.html
- 查看电脑是否安装openCV环境以及其版本
- 合资品牌车联网或率先尝到车联网技术的甜头?
- Maven聚合和继承
- 网络没问题,MSN登录不了解决方法
热门文章
- 华为云使用opesnswan配置云上云下连接!!
- appium服务的启动与关闭踩坑记录
- Eclipse中语句前后都出现奇怪的符号
- Redis数据库面试典籍30+ | 大别山码将
- wincc显示系统时间_wincc系统日期时间获取
- 计算机考试记事本创建文件,2010年职称计算机考试:记事本
- 曾国藩:一生所悟,句句珠玑,与君共勉
- “小米平板2”浮出水面,高品质低价路线能否赢得市场
- foreach 里面使用bcmul或者直接运算符出现结果不正常,触发情景未知,有大佬知道请请留意告知
- 什么是weak symbol?