欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

框架搭建

程序员文章站 2022-03-02 15:23:01
...

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'