vue-cli配置flexible过程详解

下面我将为你详细讲解“vue-cli配置flexible过程详解”的完整攻略。

1. 安装依赖

我们需要安装以下依赖：
- postcss-px2rem
- lib-flexible

在vue-cli项目中，使用以下命令安装：

npm install postcss-px2rem lib-flexible --save-dev

2. 配置postcss

在 vue-cli 项目下，新建 /build/postcss.config.js，并写入以下代码：

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    'postcss-aspect-ratio-mini': {},
    'postcss-write-svg': { utf8: false },
    'postcss-cssnext': {},
    'postcss-px-to-viewport': {
      viewportWidth: 750,     // 视窗宽度，单位为px
      viewportHeight: 1334,   // 视窗高度，单位为px
      unitPrecision: 3,       // 指定'px'转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw',     // 指定转换的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类名，可以自定义
      minPixelValue: 1,       // 小于或等于'1px'时，不转换为视窗单位
      mediaQuery: false       // 允许在媒体查询中转换'px'
    },
    'postcss-viewport-units':{},
    'cssnano': {
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false
    }
  }
}

注意：以上代码中 postcss-px-to-viewport 是将 px 转换为 vw，如果要将 px 转换为 rem，使用 postcss-px2rem。

3. 引入lib-flexible

在 main.js 中引入 lib-flexible：

import 'lib-flexible/flexible'

4. 添加视窗标记

在 index.html 中添加视窗参数：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 添加以下视窗参数，使得在移动端设备上，1px = 1真实像素 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5. 配置webpack

在 webpack.base.conf.js 中，找到 module.exports 中的 module，添加 postcss 后置处理器：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const PostcssFlexbugsFixes = require('postcss-flexbugs-fixes')
// 添加以下代码
const postcssPresetEnv = require('postcss-preset-env')
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini')
const postcssViewportUnits = require('postcss-viewport-units')
const postcssPxToViewport = require('postcss-px-to-viewport')

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // ...
          // 可以在这里添加 postcss
          postcss: [
            PostcssFlexbugsFixes(),
            postcssPresetEnv({
              autoprefixer: {
                grid: true,
                flexbox: 'no-2009'
              },
              stage: 3
            }),
            postcssAspectRatioMini(),
            postcssPxToViewport({
              viewportWidth: 750,
              viewportHeight: 1334,
              unitPrecision: 3,
              viewportUnit: 'vw',
              selectorBlackList: ['.ignore', '.hairlines'],
              minPixelValue: 1,
              mediaQuery: false
            }),
            postcssViewportUnits()
          ],
          // ...
        }
      },
      // ...
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

示例说明

示例1

假设现在有一个设计稿为750px*1334px的页面，需要在移动端上显示。我们可以将页面宽度设置为100vw（视窗宽度的1倍），高度设置为 1334/750 * 100vw，这样就可以保证在移动端上宽高比与设计稿一致，如下所示：

.page {
  width: 100vw;
  height: 177.87vw; /* 1334/750 * 100vw */
  background-color: #fff;
}

使用上述方法可以很好的适配不同设备的屏幕。

示例2

假设现在有一个需求，页面上有一个字体大小为20px的标题，“七年之痒”，在移动端上需要相对于设计稿缩小三倍，因为视觉上感觉20px太大了。可以使用 postcss-px-to-viewport 将 px 转换成视窗相对单位，例如将20px转换为20vw/3，如下所示：

.title {
  font-size: 6.67vw; /* 20 / 3 vw */
  font-weight: bold;
  color: #333;
}

这样就可以在移动端上以视觉上适合的字体大小进行显示了。

以上就是完整的“vue-cli配置flexible过程详解”的攻略。希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue-cli配置flexible过程详解 - Python技术站