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  

按需加载遇到的坑

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

3.菜单组件的开发

4.头部组件的开发

5.底部组件的开发

 

转载于:https://www.cnblogs.com/ivylv/p/11418394.html

相关资源：react-antd实现一个后台管理系统