首先create-react-app react-vw一顿简单操作生成个demo
1.cnpm run eject 暴露config文件，再cnpm run start报错，
解决：cnpm i @babel/plugin-transform-react-jsx -S
cnpm i @babel/plugin-transform-react-jsx-self -S
说是 @babel/plugin-transform-react-jsx依赖没装，装好后，又提示@babel/plugin-transform-react-jsx-self没装。。依次装上到能运行react初始化后，接着第二步！
2.安装相关postcss相关插件
cnpm i postcss-aspect-ratio-mini postcss-px-to-viewport-opt postcss-write-svg postcss-preset-env postcss-viewport-units cssnano -S
3.配置config下的webpack.config.js
// 引入postCss插件
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport-opt');
const postcssWriteSvg = require('postcss-write-svg');
const postcssPresetEnv = require('postcss-preset-env');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
// 引入postCss配置
postcssAspectRatioMini({}),
postcssPxToViewport({
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines', '.antd'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
exclude: /(\/|\\)(node_modules)(\/|\\)/
}),
postcssWriteSvg({
utf8: false
}),
postcssPresetEnv({}),
postcssViewportUnits({}),
cssnano({
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false
},
})，
测试下vw的设置是否生效，修改App.css => .App{ text-algin: center; font-size: 20px } 然后cnpm run start，打开控制台
已经生效
在样式要加上对img标签的设置，在项目开发时候有遇到过img的src属性被覆盖没显示图片的坑，就是content的锅。（如果在标签上设置一些伪类如：after，：before有的效果可能会被覆盖）
img {
content: normal !important; /*vw布局 img属性会默认加上content，导致显示不出图片的bug*/
} 附上一个react-vw-stylus-less模板 ：https://github.com/wenhai03/react-vw-stylus-less-
这个模板可以根据项目情况选择对应的样式编写
以下内容可以忽略不看~~~
分割线------------------------------------------------------------
特别需要注意的是：如果你安装的前面那一堆插件中有个postcss-cssnext，这个插件安装后，重启会报以下好几个错误，解决方案，得一步步来！坑多。。。
所以为了不挖坑，postcss-cssnext替换为 postcss-preset-env ， postcss-px-to-viewport替换为postcss-px-to-viewport-opt
（非常有可能遇到的问题 1: throw new BrowserslistError('Unknown browser query ' + selection + '') BrowserslistError: Unknown browser query dead）
解决：package.json文件找到 browserslist 修改
"browserslist": [
"last 2 versions",
"android 4",
"opera 12"
],
（问题2： ./src/index.css
Module build failed: Error: Cannot load preset "advanced". Please check your configuration for errors and try again.）
解决： cssnano版本过高，需要降级
"cssnano": "^4.1.10", -> "cssnano": "^3.10.0",
（cssnano修改完指定版本，node_modules删除，重新安装下依赖包）
加入viewport-units-buggfill配置（这个步骤看网上方案是解决，安卓低版本手机）
打开public/index.html
heade中引入 <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
body中引入
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
4.安装antd-mobile，再配置package.json。。（移动端很多公司都有自己的样式风格，有自己定制化方面的组件，这块看是否需要）
cnpm i antd-mobile -S
package.jspn下找到babel