Ant Design Pro初探—新建页面

Ant Design Pro初探———新建页面

Ant Design Pro这玩意对于一个后台工程师来说,真心是又爱又恨!  以我来说,这个后台真心太完美了,各种插件,各种样式都有! 开发后台时候如虎添翼!但是,也存在的问题就是,上手需要时间。。下边开始第一课,新建页面!

首先添加页面:

在src->page->新建文件夹System->再新建User文件夹

在上边的User文件夹下新建User.js User.less两个文件

如图:

image.png

软后在User.js中添入代码:

import React, { PureComponent } from 'react';

//import styles from './User.less'; 暂时用不到

class User extends PureComponent {
    render() {
        return (
            <div>
                HELLO WORD!
            </div>
        )
    }
}

export default User;

ok页面都新建完了 下边开始加路由:

路由位置:config->router.config.js

添加如下json

{
    name: '测试新建菜单',  //菜单名字
    icon: 'setting',       //图标
    path: '/system',       //文件夹
    routes: [
        {
            path: '/system/user', //路由名称
            name: '测试新建页面', //菜单名称
            component: './System/User/User', //文件名称
        },
    ]

},

如图:

image.png有人说是必须要在404前新建,不然会报404,我也没有测试,直接放在404菜单前了!有心的同学可以自己测试下

ok这个页面就新建完成了! 保存后,代码会自动加载的!

看看效果

微信截图_20181026132948.png

Ant Design Pro新建页面就搞定了!你学会了吗?

Ant Design Pro初探———新建页面

喜欢(2)

评论 抢沙发

表情