创建管理后端

安装react脚手架

npm install -g create-react-app

创建项目

create-react-app ant-design-admin

执行命令暴露项目的配置，可以自由配置项目所需的依赖，不使用的版本零配置即可开发。

npm run eject

注: 如若运行npm run start项目时发现报Cannot find module '@babel/plugin-transform-react-jsx-source'模块未找到，可以先 npm uninstall babel-loader 在 npm install babel-loader即可

npm install antd --save

项目使用less

npm install less less-loader --save

找到config目录下的webpack.config.js(必须执行过npm run eject才会暴露出这些配置文件)

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// 新增 less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

            {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
            },

            // 新增 less
            {
                test: lessRegex,
                exclude: lessModuleRegex,
                use: getStyleLoaders(
                    {
                        importLoaders: 2,
                        sourceMap: isEnvProduction
                        ? shouldUseSourceMap
                        : isEnvDevelopment,
                    },
                    'less-loader'
                ),   
                sideEffects: true,
            },           
            {
                test: lessModuleRegex,
                use: getStyleLoaders(
                    {
                        importLoaders: 2,
                        sourceMap: isEnvProduction
                        ? shouldUseSourceMap
                        : isEnvDevelopment,
                        modules: true,
                        getLocalIdent: getCSSModuleLocalIdent,
                    },
                    'less-loader'
                ),
            },

注: 若npm run start 提示

./node_modules/antd/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/[email protected]@less-loader/dist/cjs.js??ref--6-oneOf-7-3!./node_modules/antd/dist/antd.less)

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in E:\react\ant-design-admin\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)
.bezierEasingMixin();
打开package.json 修改 "less": "^2.7.3" 然后删除 node_modules 后重新安装即可

配置babel-plugin-import实现 antd 按需加载

npm install babel-plugin-import --save

然后打开 package.json 找到 babel添加

  "babel": {
    "presets": [
      "react-app"
    ],
    // 新增
    "plugins": [
        [
            "import",{
                "libraryName": "antd",
                "style": true
            }
        ]
    ]
  }