基于Ant Design UI框架的React项目创建及配置
1.快速创建
cnpm install -g create-react-app create-react-app my-app cd my-app/ npm start
2.Ant蚂蚁框架
1)安装使用
npm install antd --save
2）按需加载
a.安装依赖包
npm i -g yarn yarn add react-app-rewired customize-cra
b.修改 package.json 配置文件
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
c.使用 babel-plugin-import（按需加载组件代码和样式的 babel 插件）
yarn add babel-plugin-import
d.在根目录下创建一个 config-overrides.js（修改默认配置）
const { override, fixBabelImports } = require(customize-cra);
module.exports = override(
fixBabelImports(import, {
libraryName: antd,
libraryDirectory: es,
style: css,
}),
);
样式按需加载也可以使用 create-react-app 提供的 yarn run eject 命令，但是会将所有内建的配置暴露出来。
基于umi搭建react+antd项目：https://pro.ant.design/docs/getting-started-cn
