antd项目应用

在create-react-app下：

基础插件安装

1、yarn add 

#安装 react-router 、 axios 
安装 antd
暴露webpack配置文件
安装less-loader
修改less-loader


yarn add react-router-dom axios less less-loader

yarn eject 暴露webpack配置文件
报错是因为git没提交
git add .

git commit -am "save before eject"

注：这里是 -am

之后再次 yarn eject即可

2. 修改 cofig/webpack.config.js

找到

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

修改为

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

找到

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

修改为

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

3、安装antd

yarn add antd

4.按需加载

yarn add babel-plugin-import

5、在eject的情况下配置：package.json 没有eject的情况可以直接看antd官网

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

style true 是加载的less 文件 style: "css" 加载的是css文件，如果加载less 报错.bezierEasingMixin();  则需要将less降级到2.7.3

sudo yarn add less@^2.7.3

6、新版webpack修改主题样色：在 getStyleLoaders方法中 进行修改

const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign(
          {},
          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
        ),
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      if (preProcessor === 'less-loader'){
        loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: false,
            modifyVars: {
              "@primary-color": "#f9c700",
              'link-color': '#1DA57A',
              'border-radius-base': '2px',
              '@fill-body': '#54cc85'
            },
            javascriptEnabled: true,
          },
        });
      } else {
        loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        });
      }
    }
    return loaders;
  };

7、使用jsonp进行跨域请求

sudo yarn add jsonp --save

8、修改端口（如果是安装的 react-scripts start）   

（ antd 官方 ："start": "PORT=8888 react-app-rewired start", ）"start": "cross-env PORT=5000 react-scripts start",

9: redux（redux会触发组件的生命周期钩子函数，而vuex仅是数据的双向绑定，并不能触发所在组件的生命周期）

redux安装（sudo yarn add redux react-redux redux-devtools-extension --save）

sudo yarn add redux --save

suod yarn add react-redux --save

redux调试工具安装

1、首先在Chiome中安装Redux Devtools扩展

2、yarn add redux-devtools-extension

安装成功后，还需要redux-devtools在项目中的配置，实际上就是在创建store的时候把redux-devtools安装即可。

import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(
	counter,
	composeWithDevTools()
)