欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-08 14:54:14
摘要 由于需要用到弹出层但是懒得造*所以使用vant 介绍 使用的node包管理器为yarn vue-cli版本4 rem计算方式为index.html的js脚本计算 安装vant yarn add vant 配置 安装babel-plugin-import实现按需加载 yarn add babe ......

摘要

由于需要用到弹出层但是懒得造*所以使用vant

介绍

使用的node包管理器为yarn
vue-cli版本4
rem计算方式为index.html的js脚本计算

 

安装vant

yarn add vant

配置

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

yarn add babel-plugin-import

配置babel
.babelrc

{
    "plugins": [
      ["import", {
        "libraryname": "vant",
        "librarydirectory": "es",
        "style": true
      }]
    ]
  }

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

yarn add postcss-pxtorem

在package.json配置

 "postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "android >= 4.0",
          "ios >= 7"
        ]
      },
      "postcss-pxtorem": {
        "rootvalue": 100, //结果为:设计稿元素尺寸/100,比如元素宽750px,最终页面会换算成 7.5rem,可以理解为1rem等于多少的px 
        "proplist": [
          "*"
        ]
      }
    }
  },

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