关于Antd的全局安装和按需加载

Antd 使用

• 官方网站

• 全局安装

  • 安装命令：npm install antd --save
  • 引入css/less文件：import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'（我一般是在index.js里面引入，这样就不用每个文件都重新引入了）

  • 在文件开头引入所需要的组件，例如：

    import { Form, Input, Button} from 'antd';

• 按需加载

  • 手动按需加载

    • 不用在index.js文件引入css/less
    • 在文件内直接引入所需的组件和对应的css/less，例如：

      import Button from 'antd/es/button';
      import 'antd/es/button/style/css';

  • 通过配置文件按需加载

    • 执行命令npm run eject ：拉取react配置文件,完成后会发现多了config和script文件夹
    • 执行命令npm install babel-plugin-import --save-dev

    • 打开根目录下package.json文件，找到"babel"，修改代码：

      "babel":{
          "presets":[
              "react-app",
          ],
              "plugins":[
                  "import",
                  {
                      "libraryName":"antd",
                      "libraryDirectory":"es",
                      "style":"css" 
                  }
              ]
      }

    • 在文件内只需要引入需要的组件即可，例如：

      import {Button,Input} from 'antd';

• 遇到的问题

  • 如果文件被修改了，无法运行npm run eject命令

• 解决方案

  • 去文件目录下把隐藏的git文件删除，重新执行命令