使用react的Ant Design组件库的简单流程

Ant Design是一个非常流行的UI组件库，它提供了丰富的React组件和样式库。以下是使用Ant Design的详细步骤：

1. 安装Ant Design库：你可以使用npm或yarn来安装Ant Design。在终端中输入以下命令：  npm install antd  或者  yarn add antd
2. 引入Ant Design样式文件：在应用程序的根目录下，使用import语句将Ant Design的样式文件添加到应用程序中。例如：import 'antd/dist/antd.css';
3. 使用Ant Design组件：现在你可以在应用程序中使用Ant Design的组件了。例如，要使用Button组件，可以使用以下代码：

   import { Button } from 'antd';

   function MyApp() {
     return (
       <div>
         <Button type="primary">Click me!</Button>
       </div>
     );
   }
    

4. 配置主题：如果你想自定义主题，可以创建一个名为“theme.less”的文件，并将其导入到应用程序中。例如：

 

5.按需加载：如果你只需要使用Ant Design库的一部分组件，可以使用按需加载的方式减少打包体积。首先，需要安装babel-plugin-import插件：npm install babel-plugin-import 或者 yarn add babel-plugin-import    然后在babel配置文件中进行配置：

注意：直接使用npm install antd 下载的是最新版本，引入antd.css文件的时候会提示找不到，

解决方法：下载的时候指定版本，例如：npm install antd@4.24.2