react后台管理 按需加载 antd 主题 路由 前后台交互 ajax

1.安装省略

下载ant

yarn add antd

2.  下载按需加载命令

下载依赖模块

yarn add react-app-rewired customize-cra babel-plugin-import

定义加载配置的 js 模块: config-overrides.js

const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',  
}),
);

修改配置: package.json

"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},

Vscode 的 react 代码保存后,代码格式乱了怎么办

JS-CSS-HTML Formatter的插件, 把这个插件禁用后就OK了

 

在应用中使用 antd 组件

import React, {Component} from 'react'

import {Button, message} from 'antd'

 

 

使用 暴露配置

1. 按照需要的依赖
2. yarn add babel-plugin-import --dev // 安装

1. 在package.json中找到eject
2. "scripts": { "eject": "react-scripts eject" }
3. 运行命令 npm run eject
4. 注意: 此操作是不可逆的,他会暴露创建react时候的webpack的配置,而且这个命令只能在刚刚使用脚手架创建好项目之后运行(文件的结构不能发生改变的时候才能暴露)
5. 修改webpack.config.dev（开发环境）和webpack.config.prod（构建环境）下的 Process JS with Babel.下的那个options为：
6. 
7. 或者

options: {
             plugins: [
               ['import',[{  // 导入一个插件
                 libraryName: 'antd',   // 暴露的库名
                 style: true // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入
               }]]
             ],
             cacheDirectory: true,
},

 

和

options: {
              plugins: [
                ['import',[{  // 导入一个插件
                  libraryName: 'antd',   // 暴露的库名
                  style: true // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入
                }]]
              ],
              compact: true,
},

 

1. 重新运行一下项目,就可以直接引入组件了

import { Button } from 'antd';

这种方式必须暴露配置,这回让我们开发的时候不是很方便,所以推荐下面的这种方式

二. (推荐)使用react-app-rewired

1. 安装依赖

npm i [email protected] babel-plugin-import customize-cra

这个时候就会有一个比较大的坑,react-app-rewired必须制定版本,否则报错

1. 修改启动方式,在package.json中
   原版

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

 

修改后的版本

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

1. 在项目的根目录下创建config-overrides.js
2.  

const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");
 
 
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

1. 重新启动项目,就可以按需加载了

import { Button } from 'antd';

总结

使用react-app-rewired来代替react-scripts的启动方式,并且安装所需要的依赖,在根目录创建config-overrides.js文件,导入配置即可完成

自定义组件  import  前面必须要有.    如./    组件名首字母必须大写

 

自定义 antd 主题

下载工具包:

 yarn add less less-loader

修改 config-overrides.js

const {override, fixBabelImports, addLessLoader} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true, //自动加载less文件
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {'@primary-color': '#1DA57A'},
}),
);

 

引入路由

下载路由包: react-router-dom

yarn add react-router-dom

 

pages中文件使用isx结尾的文件名     component文件使用index.js这样好区分

前后台交互 ajax

yarn add axios