10_antd库的基本介绍

antd介绍

在我们学习JavaScript 的时候，我们学习了一个 bootstrap 的组件库。可以让我们快速开发，但是我们现在学习了 React ，一种组件化编程方式，很少说会去贴大量的 HTML 代码，再配一下 CSS，JS。我们也有一些现成的组件库可以使用，我们只需要写一个组件标签即可调用。这让我们 React 开发变得十分的快速，方便和整洁。

我们这里学习的是 Ant-design （应该是这样），它有很多的组件供我们使用

附上antd官网地址https://ant.design/docs/react/introduce-cn

antd组件的基本使用

使用 Antd 组件非常的简单

引包 ----- 暴露 ---- 使用

首先我们通过组件库来实现一个简单的按钮

第一步

安装并引入 antd 包

使用命令下载这个组件库

npm install antd --save

在我们需要使用的文件下引入，我这里是在 App.jsx 内引入

import { Button } from 'antd'

在引入的同时，暴露出要使用的组件名 Button

官方文档里也有详细的介绍和示例

现在我们可以在 App 中使用 Button 组件

<div>
    App..
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <br />
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
</div>

我这里使用了几种按钮

但是就这样你会发现按钮少了样式

我们还需要引入 antd 的 CSS 文件

@import '/node_modules/antd/dist/antd.less';

可以在 node_modules 文件中的 antd 目录下的 dist 文件夹中找到相应的样式文件，引入即可

自定义主题颜色

由于这些组件采用的颜色，都是支付宝蓝，有时候我们不想要这样的颜色，想要用其他的配色，这当然是可以实现的，我们需要引用一些库和更改一些配置文件来实现

在 antd 最新版中，引入了 craco 库，我们可以使用 craco 来实现自定义的效果

首先我们需要安装 craco

npm install @craco/craco

同时我们需要更改 package.json 中的启动文件

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

更改成 craco 执行

接下来我们需要在根目录下新建一个 craco.config.js 文件，用于配置自定义内容

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': 'skyblue' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

其实它就是用来操作 less 文件的全局颜色

简单的说，antd 组件是采用 less 编写的，我们需要通过重新配置的方式去更改它的值

同时我们需要将我们先前的 App.css 文件更改为 App.less 文件，在当中引入我们的 less 文件

@import '/node_modules/antd/dist/antd.less';