Vant UI 组件库如何做rem适配?

Vant是一款移动端基于vue的组件库，V2.1.1版本非常棒。文档地址：https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro，那么Vant如何使用(以下操作都是基于vue-cli3)

1.如何自动按需引入组件？

　　《1》安装插件：npm i babel-plugin-import -D

　　　　babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入

　　《2》在 babel.config.js 中配置

　　　　 在 babel.config.js 中配置

　　　　 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };

　　《3》在main.js中添加项目中需要用到的组件

　　　　例如：

　　　　  　　import { Button } from 'vant';

　　　　 　　 import 'vant/lib/index.css';

　　　　  　　Vue.use(Button);

　　　　 此步骤不能少，不然使用中无效果

 

2.如何结合flexible做Rem适配？

　　看官方文档Vant 中的样式默认使用px作为单位，那么既然需要用rem做适配，按下面步骤操作

　　《1》如何将px单位转化为rem？

　　　　借助postcss-pxtorem插件，postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。如何操作？

　　　　安装：npm install autoprefixer postcss-pxtorem --save-dev

　　　　配置：vue.config.js文件

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*'],
            // 该项仅在使用 Circle 组件时需要
            // 原因参见 https://github.com/youzan/vant/issues/1948
            selectorBlackList: ['van-circle__layer']
          })
        ]
      }
    }
  }
}

　　按以上操作即可

 

　《2》如何做rem适配？

　　　　rem适配文档上建议使用lib-flexible，flexible适配的原理是物理像素与逻辑像素的相互转化：物理像素px = window.screen.width(逻辑像素pt) * window.devicePixelRatio

　　　  如何配合框架使用:

　　　　　　1.安装 

　　　　　　　　npm i -S amfe-flexible

　　　　　　2.main.js引入

　　　　　　　　import 'amfe-flexible'

 

 《3》项目中使用？

　　 　对于宽度为750px的设计图，由于rootValue: 37.5为基准，在写css时候设计图上文字大小多少像素就写多少像素即可

 

转载于:https://www.cnblogs.com/changxue/p/11322855.html