biji/vue-cli引用vant使用rem自适应.md

vue-cli引用vant使用rem自适应

介绍

使用的node包管理器为yarn vue-cli版本4

安装vant

yarn add vant

配置

由于rem是由首页脚本定义 所以不需要安装自动计算rem的插件

安装babel-plugin-import实现按需加载

配置babel .babelrc

{
    "plugins": [
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }]
    ]
  }

安装postcss-pxtorem 这个是将px转为rem

在package.json配置 "postcss": { "plugins": { "autoprefixer": { "browsers": [ "Android >= 4.0", "iOS >= 7" ] }, "postcss-pxtorem": { "rootValue": 37.5, //结果为：设计稿元素尺寸/37.5，比如元素宽750px,最终页面会换算成 20rem，可以理解为1rem等于多少的px "propList": [ "*" ] } } }, 到此位置配置就完成了