47 lines
1.0 KiB
Markdown
47 lines
1.0 KiB
Markdown
# 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": [
|
||
"*"
|
||
]
|
||
}
|
||
}
|
||
},
|
||
```
|
||
到此位置配置就完成了
|
||
然后就可以使用官方的引入方式了
|
||
|