2019-11-25 15:18:49 +08:00
|
|
|
|
# vue-cli引用vant使用rem自适应 #
|
2019-11-25 15:25:00 +08:00
|
|
|
|
由于需要用到弹出层但是懒得造轮子所以使用vant
|
2019-11-25 15:22:31 +08:00
|
|
|
|
## 介绍 ##
|
2019-11-25 15:15:49 +08:00
|
|
|
|
使用的node包管理器为yarn
|
|
|
|
|
|
vue-cli版本4
|
2019-11-25 15:22:31 +08:00
|
|
|
|
## 安装vant ##
|
2019-11-25 15:16:49 +08:00
|
|
|
|
yarn add vant
|
2019-11-25 15:22:31 +08:00
|
|
|
|
## 配置 ##
|
2019-11-25 15:16:49 +08:00
|
|
|
|
由于rem是由首页脚本定义 所以不需要安装自动计算rem的插件
|
2019-11-25 15:22:31 +08:00
|
|
|
|
### 安装babel-plugin-import实现按需加载
|
2019-11-25 15:17:49 +08:00
|
|
|
|
配置babel
|
|
|
|
|
|
.babelrc
|
2019-11-25 15:18:49 +08:00
|
|
|
|
```
|
|
|
|
|
|
{
|
|
|
|
|
|
"plugins": [
|
|
|
|
|
|
["import", {
|
|
|
|
|
|
"libraryName": "vant",
|
|
|
|
|
|
"libraryDirectory": "es",
|
|
|
|
|
|
"style": true
|
|
|
|
|
|
}]
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
2019-11-25 15:22:31 +08:00
|
|
|
|
### 安装postcss-pxtorem 这个是将px转为rem
|
2019-11-25 15:19:49 +08:00
|
|
|
|
在package.json配置
|
2019-11-25 15:23:37 +08:00
|
|
|
|
```
|
2019-11-25 15:19:49 +08:00
|
|
|
|
"postcss": {
|
|
|
|
|
|
"plugins": {
|
|
|
|
|
|
"autoprefixer": {
|
|
|
|
|
|
"browsers": [
|
|
|
|
|
|
"Android >= 4.0",
|
|
|
|
|
|
"iOS >= 7"
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
"postcss-pxtorem": {
|
2019-11-25 15:51:39 +08:00
|
|
|
|
"rootValue": 100, //结果为：设计稿元素尺寸/37.5，比如元素宽750px,最终页面会换算成 20rem，可以理解为1rem等于多少的px
|
2019-11-25 15:19:49 +08:00
|
|
|
|
"propList": [
|
|
|
|
|
|
"*"
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2019-11-25 15:23:37 +08:00
|
|
|
|
```
|
2019-11-25 15:21:49 +08:00
|
|
|
|
到此位置配置就完成了
|
2019-11-25 15:22:49 +08:00
|
|
|
|
然后就可以使用官方的引入方式了
|
2019-11-25 15:17:49 +08:00
|
|
|
|
|
