# vue-cli引用vant使用rem自适应 #
由于需要用到弹出层但是懒得造轮子所以使用vant
## 介绍 ##
使用的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": 100, //结果为：设计稿元素尺寸/37.5，比如元素宽750px,最终页面会换算成 20rem，可以理解为1rem等于多少的px 
        "propList": [
          "*"
        ]
      }
    }
  },
```
到此位置配置就完成了
然后就可以使用官方的引入方式了