React AntDesign

AntDesign介绍

• AntDesign ，简称 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

官网

https://ant.design/docs/react/introduce-cn

安装

yarn add antd

引入样式（在index.js中引入）

import "antd/dist/antd.css";

引入组件（相关js文件中）

import { Button } from 'antd'

使用

<Button type="primary">Primary Button</Button>

---

使用 craco 修改配置

安装

yarn add @craco/craco

修改package.json文件

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

在根目录下创建craco.config.js文件用于修改默认配置

---

引入 craco-less 来帮助加载 less 样式和修改变量

安装

yarn add craco-less

修改craco.config.js中的plugins

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

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

引入antd.less文件

- import "antd/dist/antd.css";
+ import 'antd/dist/antd.less';

---

配置别名

在 craco.config.js 中

...

const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
  ...
  ,
  webpack: {
    alias: {
      '@': resolve("src"),
      'components': resolve("src/components"),
    }
  }
}

使用

import MyCpn from 'components/MyCpn';

---

最后，重启项目

yarn start

END