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": [ "*" ] } } },
到此位置配置就完成了
然后就可以使用官方的引入方式了
上一篇: Mvc导入