【react里面怎么引入antd蚂蚁金服的第三方库】

react里面怎么引入antd蚂蚁金服的第三方库

---

一、antd是什么？

antd是第三方库，里面有很多写好的组件，可以直接在react里面拿来引用，只需要在react里面安装ant即可

 yarn add antd或者 npm add antd

如果按照下载过程太慢，可以查看镜像源，并且安装镜像源在进行安装
命令查看源

npm config get registry   

安装镜像源

npm config set registry https://registry.npm.taobao.org 

查看是否安装成功

npm config get registry 

二、使用步骤

在创建好的 create-react-app新的项目中，进行以下步骤操作即可
第一步：

yarn add antd或者 npm add antd

第二部：

yarn add @craco/craco

第三步：
把package.json文件里面的scripts的start内容替换成加号start的内容

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

第四部：
然后在项目根目录创建一个 craco.config.js 用于修改默认配置。
直接将下面的代码粘贴到craco.config.js里面保存即可。

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

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

第五步：在src路径下建立App.less文件（这里不是App.js,而是App.less），在App.less里面写一条语句：

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

第六步：在src里面的APP.js文件里面引入import "./App.less"即可

总结

以上为react最新引入antd的最新方法。
具体引入antd可以参考蚂蚁金服官网