react使用踩坑记（一）

_ang 发布于2019-08-26 11:57 / 2361人阅读

摘要：本文主要介绍在移动端项目中如何使用及其配置使用脚手架生成的项目，后运行弹出配置项，该命令不可逆哦。使用了作为计算依据，因此需要在中贴上以下代码，并没有使用淘宝的方案使用的设计图是的哦配置的按需加载当然了，你需要先。

本文主要介绍在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文件里写多少尺寸就行了

GPU云服务器云服务器踩坑记 react使用webrtc 遇坑记脱坑记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107886.html

react使用踩坑记（一）

摘要：本文主要介绍在移动端项目中如何使用及其配置使用脚手架生成的项目，后运行弹出配置项，该命令不可逆哦。使用了作为计算依据，因此需要在中贴上以下代码，并没有使用淘宝的方案使用的设计图是的哦配置的按需加载当然了，你需要先。本文主要介绍在react移动端项目中如何使用antd-mobile2及其配置使用 create-react-app脚手架生成的项目，后运行npm run eject 弹出...

toddmark 2019-08-29 15:33 评论0 收藏0
React和React-native踩坑记

摘要：坑请求跨域问题使用时，其中的已经默默帮你做了很多事，都帮你配置好了所以你发现你找不到相关的配置文件。放到服务器上仍然是空白的无法访问。原来是因为路径问题，简单配置一下即可。上文提到过已经帮我们做好了很多事，方便在此，麻烦也在此。 react坑： 1、fetch请求cookie跨域问题使用creat-react-app时，其中的react-script已经默默帮你做了很多事，都帮你配置好...

yck 2019-08-21 18:38 评论0 收藏0