React开发后台管理系统

 

1.基础插件安装，less文件加载配置

•  安装基础插件
  • 安装React-Router 、Axios
    • yarn add react-router-dom axios less-loader（router是4.0版本）
  • 安装antd
    • yarn add antd
  • 暴露webpack配置文件
    • yarn eject
  • 安装less-loader
  • 修改less-loader

 

 

• • • 2.x 中将webpack.config.dev.js 与 webpack.config.prod.js进行了合并，只有一个webpack.config.js

• • • yarn eject 只能用一次，用完即止，多出一些文件在目录里，我们要在config文件夹下的webapck.config.js里配置

• • • 新加less匹配项 copy 一份跟 sassRegex,sassModuleRegex 一样的声明即可： const lessRegex = /.less/ const lessModuleRegex = /.module.less$/

• • • 在sass的配置下新增less配置

• • • • { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), },
    • 关掉服务，重新yarn start 在 App.js中导入less文件一切正常 

 

2.项目主页结构开发

• 使用antd的 babel-plugin-import实现按需加载
• yarn add babel-plugin-import  
• 修改webpack配置，在webpack.config.js页面

1 ['import',{
2     libraryName:'antd',
3     style:true
4   }
5 ],

 

用管理员权限打开cmd ，下载：

• • yarn add babel-plugin-import  

按需加载遇到的坑

1. （https://blog.csdn.net/weixin_40814356/article/details/84676903）
2.   安装less低版本  ，例如@2.7.3    ----------yarn add [email protected]

3.菜单组件的开发

4.头部组件的开发

5.底部组件的开发