react使用踩坑记（一）

本文主要介绍在react移动端项目中如何使用antd-mobile2及其配置

使用 create-react-app脚手架生成的项目，后运行npm run eject 弹出配置项，该命令不可逆哦。

1、使用了rem作为计算依据，因此需要在index.html中贴上以下代码，并没有使用淘宝的flexible方案

 (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

使用的设计图是750的哦！

2、配置antd-mobile的按需加载

 2-1. 当然了，你需要先npm i antd-mobile --save。

 2-2.配置按需加载package.json

3、配置webpack

3-1.首先 npm i postcss-px2rem-exclude  --save-dev
3-2.config/webpack.config.dev.js和webpack.config.prod.js中首先引入

const px2rem=require('postcss-px2rem-exclude');
然后就是配置了，直接上图了

webpack.config.dev.js和webpack.config.prod.js都需要如此配置哦！

4、使用

直接引用需要的组件就可以了

5、关于css的单位问题

750的设计图，ps上量的尺寸是多少px，在scss文件里写多少尺寸就行了