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文件删除，从新执行命令