React开发后台管理系统

2024-09-01 08:32:39

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页面

 ['import',{

     libraryName:'antd',

     style:true

   }

 ],

用管理员权限打开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.底部组件的开发

最新文章

热门文章