本文主要介绍在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.jswebpack.config.prod.js都需要如此配置哦!

4、使用

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

图片描述

5、关于css的单位问题

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

本文固定链接: http://www.js-code.com/react/react_44325.html