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. （http://www.javashuo.com/article/p-epyzylvu-bv.html）
2.   安裝less低版本  ，例如@2.7.3    ----------yarn add less@2.7.3

3.菜單組件的開發

4.頭部組件的開發

5.底部組件的開發