vant+vantRem适配方案

1.安装 Vant

   npm i vant

引入 Vant 组件
完整引入好处：使用方便缺点：打包体积大
按需引入好处：打包体积小缺点：相对于全部引入要稍微麻烦一些

在src/main.js 中，以vue插件的方式完整引入vant组件

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

测试使用：

在任意组件中，以App.vue为例，测试使用

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

效果如下：

解决REM适配

因为这个项目是移动端，所以，它需要去适配不同的手机屏幕。我们希望实现适配的效果是：与屏幕大小相关。以按钮为例：在大屏手机，按钮的宽高都大些，在小屏手机上尺寸小些。

分析

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具一起工作，来达到目标。-----地址

技术手段：

把所有px单位改成rem ，用postcss-pxtorem 来实现，它是一款 postcss 插件，用于将px转化为 rem。
根据不同的手机屏幕的宽度，来动态设置rem的参考值：html标签上的font-size的大小。用lib-flexible 来实现，用于设置 rem 基准值

它对应的包名不是这个名字，而是amfe-flexible。
它需要是生产依赖

安装包

# 后处理器 开发阶段使用
# 作用：把px单位自动转成rem单位
npm i postcss-pxtorem -D

# 修改rem基准值的js插件   需要在打包后需要使用,so 不用加 -D
# 作用: 根据设置屏幕的宽度去调整rem的值（html标签上font-size的大小）
#      它的默认计算方式是屏幕宽度的1/10，默认值是37.5
npm i amfe-flexible

设置postcss

根目录下创建postcss.config.js文件，内容如下：

module.exports = {
plugins: {
  'autoprefixer': {},
  'postcss-pxtorem': {
    rootValue: 37.5, // 转换px的基准值。例如一个元素宽是75px，则换成rem之后就是2rem。
    propList: ['*']
  }
}
}

这一步完成之后，通过npm run serve 重启一下项目，它会把原来样式中的px单位自动转成rem单位。

引入flexible

最后，入口文件main.js导入 amfe-flexible

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入Vant所有的组件
import Vant from 'vant'
// 用它的样式
import 'vant/lib/index.css'

// 它会根据的手机尺寸来调整rem的基准值：html标签上的font-size。
+ import 'amfe-flexible'

`大功告成！`

最后编辑于：2020.06.07 19:30:58