【前端学习】React学习笔记-使用antd

antd

参考antd官网：在 create-react-app 中使用

使用

输入指令 npm install antd 安装antd
注意antd需要自己手动引入样式。

import 'antd/dist/antd.css'

文档

如果需要看详细的教程，需要看3.x版本的文档。

基本使用

App.js

import React, { Component } from "react";
import { Button,DatePicker } from "antd";
import 'antd/dist/antd.css'
import {WechatOutlined} from '@ant-design/icons'
export default class App extends Component {
  render() {
    return (
      <div>
        <Button type="primary">Primary Button</Button>
        <Button>Primary Button</Button>
        <WechatOutlined/>
        <DatePicker onChange={(e)=>{console.log(e)}}/>
      </div>
    );
  }
}

常用组件库

vant适用移动端，antd首先是为React打造，也有对应Vue的antdv，ElementUI首先为Vue打造，也有对应的Element For React。这些基本都是适用于后台管理系统。

按需引入

上面关于组件的引入就是按需引入，但是样式是全部引入的（大概光这个样式就有60k）。

暴露webpack配置（暂时没啥用）

输入yarn eject指令，会暴露出一个config文件夹。


但是这样暴露以后，很容易改错，弄错整个项目都有可能崩了，并且几乎无法知道去哪里改。所以需要换一种方法。

使用第三方库修改脚手架配置

1、执行下面指令，安装两个第三方库：
npm install react-app-rewired customize-cra
react-app-rewired库用于启动脚手架，customize-cra用于修改脚手架配置。
2、修改packge.json的scripts

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

3、安装babel-plugin-import
npm install babel-plugin-import
4、在根目录下创建config.overrides.js文件（现在的版本应该是config-overrides.js）并修改配置，如：

/* config.overrides.js */
const { override, fixBabelImports } = require("customize-cra");
// 配置具体的修改规则
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  })
);

5、删除掉原先引入的antd.css文件，重新启动一下项目，观察样式是否正常。

主题定制（这里有些问题，以后再修改）

antd默认的主题色就是阿里蓝，但是我们希望主题色是其他颜色，这就需要主题定制功能。
经过分析，发现antd的样式是用less写的，因此可以直接在less中修改那个关于主题色的变量。
1、安装less、less-loader
npm install less less-loader
2、修改config-overrides.js文件

const { override, fixBabelImports,addLessLoader } = require("customize-cra");
// 配置具体的修改规则
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    // style:'css'
    style: true,
  }),
  addLessLoader({
    javascriptEnabled:true, // 这个必须写成true，不然用不了
    modifyVars:{'@primary-color':'orange'} // 这个就是修改Vars的核心
  })
);