目的：搭建一个简单的框架让开发更加高效🎆

参考：https://github.com/gaohan1994/react-vw-layout

vue使用方式：《如何在Vue项目中使用vw实现移动端适配》关于具体如何使用请参考再聊移动端页面的适配使用Flexible实现手淘H5页面的终端适配

目的：搭建一个简单的框架让开发更加高效🎆

webpack.config.dev.js # 开发环境配置
webpack.config.prod.js # 生产环境配置
webpackDevServer.config.js # 开发服务器配置

1.创建项目

create-react-app react-vw-layout
cd react-vw-layout
npm start

打开http://localhost:3000/ 可以看到react欢迎页面，第一步成功。

2.打开配置选项

由于react默认隐藏webpack配置需要手动显示。

npm run eject
//Are you sure you want to eject? This action is permanent. (y/N) 
y

运行完eject之后项目结构如下 () 第二步收工，第三部开始配置各种插件。

3.增加配置

安装postCss插件

npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano

在config/webpack.config.dev.js文件中进行如下修改

1.引入postCss插件

const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');

2.加入postCss配置

加入配置代码位置如下

{
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
            //看这里看这里看这里
          ],
        },
      },
    ],
},

需要加入的代码如下

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'], // (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. 
}),
postcssWriteSvg({
  utf8: false
}),
postcssCssnext({}),
postcssViewportUnits({}),
cssnano({
  preset: "advanced", 
  autoprefixer: false, 
  "postcss-zindex": false 
})

第三步收工。

4.测试

修改App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        hello vw-layout
      </div>
    );
  }
}
export default App;

修改App.css

.App {
  width: 750px;
  height: 200px;
  background: #f27a7a;
  color: #ffffff;
  line-height: 200px;
  text-align: center;
}

重新npm start页面显示如下

可以说是非常OK，剩下最后一个问题，配置生产环境webpack配置文件。

5.配置生产环境webpack.config.js

操作与配置测试环境文件相同先引入插件，在相同的位置配置postCss插件配置完成后执行npm run build 打开static/css/main.********.css 可以看到已经成功编译，打完收工

6.加入viewport-units-buggyfill配置

打开public/index.html 首先在<head></head>中引入阿里cdn

<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中，加入如下js代码：

 <script>
  window.onload = function () {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });
  }
</script>

如果遇到img无法显示，则添加全局css

img { 
    content: normal !important; 
}

OK配置成功。这样就适配了低版本安卓机型

7.加入css-modules配置

一般的小项目不使用css-modules已经可以hold住了，但是页面多起来还是建议使用css-modules，下面介绍一下用法：

执行npm i --save react-css-modules

在App.js文件中引入插件 import CSSModules from 'react-css-modules';

修改css文件的引入方式从import './App.css';修改为import styles from './App.css';

修改引用Css方式 className=>styleName

修改导出方式 export default App=>export default CSSModules(App, styles);

保存，从新执行npm start查看页面发现失败

原因是未打开css import配置，此时import styles from './App.css';该语句并未成功引入css文件。

打开webpack.config.dev.js加入modules: true 找到如下位置

{
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          //看这里看这里看这里看这里
          modules: true,
          
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
           //.....省略
        }
      }
    ],
  },

保存，再次执行npm start查看页面成功！但是这个class名太过乱码不适于调试，再次打开webpack.config.dev.js 找到如下位置加入语句localIdentName:'[name]_[local]_[hash:base64:5]'

{
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          modules: true,
          importLoaders: 1,
          //看这里看这里看这里
          localIdentName: '[name]_[local]_[hash:base64:5]'
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
           //.....省略
        }
      }
    ],
  },

再次执行npm start查看页面

最后

最后相同步骤加入到webpack.config.prod.js中执行npm run build 查看打包文件

图标

Font Awesome License: CC BY 4.0 License Ionicons License: MIT Material Design icons Version 2.0 Typicons License: CC BY-SA 3.0 Github Octicons icons License: MIT Feather License: MIT Game Icons License: CC BY 3.0 Weather Icons License: SIL OFL 1.1

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
.idea		.idea
config		config
public		public
scripts		scripts
src		src
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
yarn.lock		yarn.lock

MarioGogogo/react-vw-layout

Folders and files

Latest commit

History

Repository files navigation

目的：搭建一个简单的框架让开发更加高效🎆

1.创建项目

2.打开配置选项

3.增加配置

加入配置代码位置如下

需要加入的代码如下

4.测试

5.配置生产环境webpack.config.js

6.加入viewport-units-buggyfill配置

OK配置成功。这样就适配了低版本安卓机型

7.加入css-modules配置

最后

图标

增加一些常用功能

About

Topics

Resources

Stars

Watchers

Forks

Languages