关于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配置文件,完成后会发现多了configscript文件夹
      • 执行命令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文件删除,重新执行命令

你可能感兴趣的