vue-cli引用vant使用rem自適應

摘要

由於需要用到彈出層但是懶得造輪子所以使用vant

介紹

使用的node包管理器為yarn
vue-cli版本4
rem計算方式為index.html的js腳本計算

安裝vant

yarn add vant

配置

安裝babel-plugin-import實現按需載入

yarn add babel-plugin-import

配置babel
.babelrc 與package.json同級 如果沒有就創建一個

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

安裝postcss-pxtorem 這個是將px轉為rem

yarn add postcss-pxtorem

在package.json配置 這個“postcss”預設配置下是存在的 直接替換掉就可以

 "postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "Android >= 4.0",
          "iOS >= 7"
        ]
      },
      "postcss-pxtorem": {
        "rootValue": 100, //結果為：設計稿元素尺寸/100，比如元素寬750px,最終頁面會換算成 7.5rem，可以理解為1rem等於多少的px 
        "propList": [
          "*"
        ]
      }
    }
  },

到此位置配置就完成了
然後就可以使用官方的引入方式了