vue-cli3移动端自适应配置 Vant组件库

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible

　　

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    plugins: {
        autoprefixer: {}
    },
    plugins: {
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 37.5,
                        propList: ['*'],
                        selectorBlackList: ['van-circle__layer']
                    })
                ]
            }
        }
    }
};

import 'amfe-flexible';

这样整个rem适配就完成了。

案例：以Vant组件库中的Button按钮为例：
在main.js中引入

//按需引用
import { Button } from 'vant';
Vue.use(Button);
//或者全局引用
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

或者在单文件按需引入

<script>
import { button } from 'vant';
export default {
  components:{
    'van-button':button
    //或者下面的方式
    //[button.name]:button

  }
}
</script>

在结构中

<template>
  <div class="home">
      <div class='aaa'>111</div>
      <van-button disabled type="primary" class="btn">主要按钮</van-button>
      <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<script>
import { button } from 'vant';
export default {
  components:{
    'van-button':button
    //或者下面的方式
    //[button.name]:button

  }
}
</script>
<style lang="scss">
.aaa{
    width:187.5px;
    background: red;
    height:20px;
    font-size:18px;
}
.btn{
  width: 375px;
  height: 100px;
  font-size: 18px;
}
</style>

结果如下,仔细看样式,变成了rem