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文件了,而且实现了按需分配。