React项目中UI库的使用
一.安装antd移动端UI库: npm install antd-mobile --save
PC端UI库: npm install antd --save
二.引入**全局引入**
在react的入口文件 index.js 里引入 import 'antd/dist/antd.css',在组件里引入组件就可以使用了,例如组件里使用 buttonimport { Button } from 'antd';
xxx
逆战班
按需加载
1、yarn add react-app-rewired customize-cra
react-app-rewired 不用弹射就可以配置webpack
customize-cra 自定义脚手架环境
2、package.json"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
3、项目的根目录建立一个配置文件
**config-overrides.js**
4、yarn add babel-plugin-import 下载babel插件,在编译过程中将import的写法自动转换成按需引入的方式
5、config-overrides.js 文件里const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
6、可以自定义主题 less less-loader (如果嫌麻烦可以无视此行代码)
7、可以配置装饰器
7-1)安装:npm install --save-dev @babel/plugin-proposal-decorators
7-2)在根目录下的config-overrides.js里修改配置const { addDecoratorsLegacy } = require('customize-cra');addDecoratorsLegacy(), //装饰器语法