react使用踩坑記（一）

本文主要介紹在react移動端項目中如何使用antd-mobile2及其配置

使用 create-react-app腳手架生成的項目，後運行npm run eject 彈出配置項，該命令不可逆哦。

一、使用了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的哦！

二、配置antd-mobile的按需加載

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

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

三、配置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都須要如此配置哦！

四、使用

直接引用須要的組件就能夠了

五、關於css的單位問題

750的設計圖，ps上量的尺寸是多少px，在scss文件裏寫多少尺寸就好了