ui庫
ant design mobile 移動端
ant design pc端
yarn add antd 安裝這個第三方的插件
全局引入(不推薦)：
路口文件：import 'antd/dist/antd.css';
組件里：
import { Button } from 'antd';
<Button type="primary">Button</Button>
按需加載：
1.先安裝yarn add react-app-rewired customize-cra
yarn add 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-app-rewired eject"
}
3.然后在項目根目錄創建一個 config-overrides.js 用於修改默認配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
4.安裝yarn add babel-plugin-import
配置文件config-overrides.js ：
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
5.自定義主題
6.react cli環境下用@符號指向src
addWebpackAlias
const { addWebpackAlias} = require('customize-cra');
const { resolve } = require('path') ;
addWebpackAlias({
"@":resolve("src")
})
7.裝飾器@babel/plugin-proposal-decorators 編譯類語法裝飾器語法變成es5的語法
yarn add @babel/plugin-proposal-decorators
const { addDecoratorsLegacy} = require('customize-cra');
const { addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
addDecoratorsLegacy();
);
用法：@高階組件
class 組件 extends Component{
}
等價於Hoc(組件)