react-ui（antd-mobile库）

最流行的开源React UI组件库

1.material-ui(国外)

官网: http://www.material-ui.com/#/ github: https://github.com/callemall/material-ui

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

PC官网: https://ant.design/index-cn 移动官网: https://mobile.ant.design/index-cn Github: https://github.com/ant-design/ant-design/ 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文件了，而且实现了按需分配。