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