reactjs_ant design pro前端框架入门

Ant Design Pro 是基于Ant Design的一个开箱即用的，企业级中后台前端/设计解决方案。

 

官网地址

https://pro.ant.design/index-cn

 

快速入门

下载地址https://github.com/ant-design/ant-design-pro

 

下载解压后目录如下

 

开发工具导入工程完成后,初始化工程  yarn install#安装相关依赖

 

yarn start #启动服务

 效果如下

 

菜单和路由

 在pro中，菜单和路由，在router.config.js配置文件中进行管理：

打开router.config.js后，可以看出，pro提供了有2套路由（布局），分别是/user和/

 

添加路由

 path: '/',
      component: '../layouts/SecurityLayout',
      routes: [
        {
          path: '/',
          component: '../layouts/BasicLayout',
          authority: ['admin', 'user'],
          routes: [
            {
              path: '/',
              redirect: '/welcome',
            },
            {
              path: '/new',
              name:'new',
              routes:[ {
                  path: '/new/welcome1',
                  name: 'welcomea',
                  icon: 'smile',
                  component: './Welcome',
              }, {
                  path: '/new/welcome2',
                  name: 'welcomeb',
                  icon: 'smile',
                  component: './Welcome',
              }]
            },
            {
              path: '/welcome',
              name: 'welcome',
              icon: 'smile',
              component: './Welcome',
            },

 

效果如下

 

ant design pro 使用的是语言国际化,需要到配置的文件中配置中文

 

 

添加 

'menu.new':'新选项卡',
'menu.new.welcomea':'欢迎a',
'menu.new.welcomeb':'欢迎b',

规则如下

一级菜单

menu.name名

二级菜单

menu.一级name名.二级name名

效果图如下

 

新增页面

在src/pages 目录下新建一个New文件夹,用来划分代码,目录下创建NewWeclomeA.js文件

import React from 'react';

class NewWeclomeA extends React.Component {
  render() {
    return (
      
hello a
    );
  }
}
export default NewWeclomeA;