react ant-design管理后台

管理后台

第九节

底部布局实现

第八节

promise封装json

第五节

菜单渲染


递归动态实现菜单渲染

头部结构

第四节

骨架布局

第三节

主架构搭建出来,这个属于项目的架构部分，不属于工程化部分，项目的架构，固定我们的目录

components 组件，是某一个页面的一部分，复用，被引用
pages 网页，就是实实在在可以呈现网页的页面

组件和样式是配套的，所以我们通常建一个文件夹

Header>.less .jsx
Footer>.less .jsx
NavLeft>.less .jsx

第二节

按需加载
相当于替换了

@import '~antd/dist/antd.css';

 // babel-plugin-import====支持
  ['import',
   { libraryName:'antd',style:true}
  ]

less和less模块化
yarn add react-router-dom axios less less-loader

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// less suport==========start
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using LESS
// using the extension .module.less or .module.less
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},
// less end ===========

第一节