React框架Umi实战(2)整合dva开发后台管理系统

umi官方推荐结合dva使用更配哦，其实他们都是同一位开发者开发的，属于阿里内部开源框架。


// ref: https://umijs.org/config/
export default {
plugins: [
// ref: https://umijs.org/plugin/umi-plugin-react.html
['umi-plugin-react', {
antd: true,
dva: true,
dva: {
immer: true
},
dynamicImport: false,
title: 'umis',
dll: false,
hardSource: false,
routes: {
exclude: [
/components//,
],
},
}],
],
}
2 修改layouts

先搞一个后台的布局,可以参考ANT DESIGN PRO https://pro.ant.design/
layoutsindex.js

import styles from './index.less';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import { Component } from 'react';
import Link from 'umi/link';
import logo from '../assets/logo.svg';
const {Header, Content, Footer, Sider} = Layout;
const SubMenu = Menu.SubMenu;
class BasicLayout extends Component {
constructor(props) {
super(props);
this.state = {
collapsed: false,
};
}
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}
render(){
return (

collapsible
trigger={null}
collapsed={this.state.collapsed}
className={styles.sider}
>





Ant Design Pro



layoutsindex.less

.logo {
height: 64px;
position: relative;
line-height: 64px;
transition: all 0.3s;
background: #002140;
overflow: hidden;
img {
display: inline-block;
vertical-align: middle;
height: 32px;
}
h1 {
color: white;
display: inline-block;
vertical-align: middle;
font-size: 20px;
margin: 0 0 0 12px;
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 600;
}
}
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color .3s;
.logo {
height: 32px;
background: rgba(255,255,255,.2);
margin: 16px;
}
}
.sider {
min-height: 100vh;
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
position: relative;
z-index: 10;
&.ligth {
background-color: white;
.logo {
background: white;
h1 {
color: #002140;
}
}
}
}

浏览器访问你会看到如下效果：

还有其他后端技术分享在我的公众号。