框架搭建

1、整体分析

公共部分：侧边栏、头部、尾部

实现：src下components创建NavLeft、Header、Footer文件夹，在文件夹里分别创建index.js、index.css

主页：src下admin.js和admin.css，并修改app.js的引入admin；admin.js引入公共部分：如：import Header from './components/Header'(会自动定位到Header文件夹下的index.js)

侧边栏目录数据：

const menuList=[
    {
        title:'首页',
        key:'admin/home'
    },
    {
        title:'UI',
        key:'admin/ui',
        children:[
            {
                title:'按钮',
                key:'admin/ui/button'
            },
        ]
    },
]

　渲染侧边栏：使用递归

renderMenu=(data)=>{
  return data.map((item)=>{
    //如果有子层，递归调用自己
    if(item.children){
      return <SubMenu title={item.title} key={item.key}>
                  {this.renderMenu(item.children)}
              </SubMenu>
    }
    //如果没有子层，返回
    return <Menu.Item title={item.title} key={item.key}>
                {item.title}
              </Menu.Item>
  })  
}

　　公共方法或者调用第三方组件可以单独写在一个文件里

export default class Methods{
    static methods(){}
.....
}
使用：import   method from ‘url’
method.methods()   

　　在less中使用预定义颜色

      @import '../../url'