reactjs

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 ( <div>hello a</div> ); } } export default NewWeclomeA;