react-ui（antd-mobile库 按需加载）

react-ui（antd-mobile库）

最流行的开源React UI组件库

1.material-ui(国外)

1.  官网: http://www.material-ui.com/#/
   

2.  github: https://github.com/callemall/material-ui
   

2 ant-design(国内蚂蚁金服)

1.  PC官网: https://ant.design/index-cn
   

2. 移动官网: https://mobile.ant.design/index-cn

3.  Github: https://github.com/ant-design/ant-design/
   

4. Github: https://github.com/ant-design/ant-design-mobile/

在create-react-app中应用库：

首先先需要npm install antd-mobile --save 导入这个库

在实际应用中我们往往不会用到这个库里所有的样式，因此我们就需要按需加载（只会加载你用到的那一部分样式），这样会提高效率。

当然官网上也提供了对应方法点击查看

如果你对那个方法不太熟悉的话 我这个简化了一下这个方法

1.首先加载所需要的配置

npm install react-app-rewired customize-cra --save-dev
npm install babel-plugin-import --save-dev

2.修改package.json

把这个修改

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

为

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },

然后再根目录下创建一个文件 config-overrides.js，然后再文件中写入

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

注意这个文件在vscode中可能会报一点小错误，不用理会。这样就配置好了。在使用的时候就不能在引入css文件了，而且实现了按需分配。

扫描二维码关注公众号，回复： 9616006 查看本文章