正文

React开发后台管理系统

IP云
IP云V管理员/5 阅读
08/22
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

按需加载遇到的坑

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

3.菜单组件的开发

4.头部组件的开发

5.底部组件的开发