基于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