我的react之路-3 -- UI库加载方式 --ant design

ant design

在react的漫漫长路上，我们不可能一直用原生的html+css去编写总会使用UI库，这次我们来讲讲react的uUI库蚂蚁金服 ant design
你可以使用yarn create react-app antd-demo 来直接使用一个它给你配好的含有ant design的react也可以先npm i antd来在你所要使用的react项目中 下载完以后你可以直接在app.js里面来全局引用。

import { Button, DatePicker, version } from "antd";
import "antd/dist/antd.css";

也可以配置按需加载 ，一般更推荐按需加载这样可以减轻你的项目 在你的根目录下创建config-overrides.js文件里面写入即可按需加载
yarn add babel-plugin-import

+ const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
   }),
 );

//例子 
import {Button} from 'anted'
class index extends Component {
render(){
		<Button>Anted Button</Button>
  }
}

组件的使用官方文档说的很详细 这里我就不再一一枚举了 地址如下：https://ant.design/components/icon-cn/#components-icon-demo-custom
到这里就基本结束了，但是我还想给自己留一个眼位 ，如何配置setupProxy.js 是在src的目录下
这里要使用一个插件http-proxy-middleware可以让你在不弹射的情况下来进行配置代理。完整配置如下：

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    "/hd",
    createProxyMiddleware({
      target: "http://192.168.1.104:3000",
      changeOrigin: true,
      pathRewrite: {
        "^/hd": "",
      },
    })
  );
};

下一期，再写一期redux没错头一篇预告，
欢迎各位小伙伴留言公讨