1.后台首页搭建

1.1.环境准备

需要安装的插件

React-Router 
Axios
AntD
less less-loader

安装插件

npm i react-router-dom less less-loader axios antd

接下来,暴露webpack配置

npm run eject

添加less支持步骤

第一步,添加less规则,在config/webpack.config.js中增加下面代码(如果你的版本和我的一样,大概在50行添加)

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

第二步,添加less文件支持的loader配置

// Less 解析配置
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    )
},

antd的按需加载

1.2.页面结构搭建

1.3.菜单组件

1.4.头部组件

1.5.底部组件