私と一緒に作成反応するアプリの足場VW-レイアウトソリューションを使用して

また、VW適応ヴュー-cliの前に砂漠を見て、私はH5を書いただけでなく、VUEの使用は、プロジェクトをやって、それが設定され、砂漠のブログに構築されます。
今、上記のgithubの上で、私はそれがモバイルエンドに合わせ作成反応するアプリを使用してブロガーは、とても幸せなVWのフィットを使用している、そして今、私たちはプロジェクトと反応することがVWを使用しました-
最初の大きなオープンソースブロガー住所を置きます：https://github.com/gaohan1994/react-vw-layout
あなたに賞賛の無私のオープンソースプログラマーポイントを与え、あなたが最も愛すべき人の子です。
1.プロジェクトを作成します。

cnpm install -g create-react-app
create-react-app react-vw-layout
cd react-vw-layout
npm start

2 ..設定オプションを開き
原因は、あなたが手動で表示を設定する必要があり、デフォルトのWebPACKで隠されて反応します。
イジェクト完成したプロジェクトは、次の

第2のステップは、様々なプラグインを設定する第三の開始、一日を呼び出します。
3.割り当てを増やす
プラグpostCssをインストールします

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

設定/ webpack.confi.js文書で次のように変更することが
postCssウィジェット導入1

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設定を追加

次のコンフィギュレーションコードの位置を追加します。

  {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            // postcssNormalize()
            // 加入地点
            // 加入地点
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },

次のようにコードを追加する必要があります

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;
}

次に、プロジェクトを実行し、プロジェクトがエラーで実行されます

解決策：

cnpm i cssnano-preset-advanced --save-dev

プロジェクトの実行

プロジェクトを詰め5.プロダクション環境
NPM実行ビルドエラーの使用して

ファイルpackage.jsonを修正するためのソリューションを

 [
    "last 2 versions",
    "android 4",
    "opera 12"
  ],

そして、成功したプロジェクトをパッケージ化

静的/ CSS /メインを開きます。********。のCss

6.加入viewport-units-buggyfill配置
打开public/index.html

首先在中引入阿里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>

最终index.html如下

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
    <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>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>
      window.onload = function () {
        window.viewportUnitsBuggyfill.init({
          hacks: window.viewportUnitsBuggyfillHacks
        });
      }
    </script>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

重新执行npm start打开页面发现：

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

img { 
    content: normal !important; 
}

这样就适配了低版本安卓机型
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.js加入modules: true 找到如下位置

  {
        loader: require.resolve('css-loader'),
        // options: cssOptions,
        // 代码看这里看这里
        options:{
          //添加添加添加
          modules:true,
          importLoaders:1,
        }
      },

保存，再次执行npm start查看页面

是这个class名太过乱码不适于调试，再次打开webpack.config.dev.js 找到如下位置加入语句localIdentName:'[name][local][hash:base64:5]'

 {
        loader: require.resolve('css-loader'),
        // options: cssOptions,
        // 代码看这里看这里
        options:{
          //添加添加添加
          modules:true,
          importLoaders:1,
          localIdentName: '[name]_[local]_[hash:base64:5]'
        }
      }

再次运行项目

我们可以看到对应的class，方便我们在项目中的调试
最后我们执行npm run build 查看打包文件

嗯，已经大功告成啦啦啦啦啦啦啦
开心，再次感谢作者大大无私的分享经验

私と一緒に作成反応するアプリの足場VW-レイアウトソリューションを使用して

おすすめ