vue+vant 实现rem的转换
1. 搭建环境
1.1.输入 vue ui
1.2. create project 创建项目
1.3. 选择手动安装
1.4. 选择配置文件
1.5. 选择版本和postcss配置
1.6. 选择预设—我们这边不选择预设
1.7. 等待创建
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGTzhOBC-1608575680491)(./img/image-20201222012111107.png)]
1.8. 创建成功!!
2. 启动项目
2.1. 找到对应的项目文件—> 找到tasks任务----> 找到serve 服务----> 找到Run task 启动项目
2.2. 点击启动
2.3. 启动成功
3. 安装vant
3.1. 找到Dependencies–>install
3.2. 安装成功
4. vue项目中使用vant
4.1.配置babel,新建根目录下新建:.babelrc
(如果项目中,就不需要新建了)
-
写入配置:
{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] }
4.2. 安装依赖
# 1.安装babel-plugin-import实现按需加载
yarn add babel-plugin-import
4.3. 测试是否可以使用vant
-
-
在about.vue页面写入:
<van-button type="default">默认按钮1</van-button> <van-button type="primary" @click="clickEvent">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button>
-
在main.js写入:
import {Button} from 'vant'; Vue.use(Button);
-
刷新页面:
-
说明成功了
-
5. 引入rem转换–安装postcss-pxtorem 这个是将px转为rem----注意直接可以在项目设置px,这个插件自动会编译的rem自动识别,你在项目中使用px就可以了,不用在vscode再次使用rem,这样子写起来更快了
5.1. 命令安装:postcss-pxtorem
yarn add postcss-pxtorem@5.1.1
or
cnpm i postcss-pxtorem@5.1.1
5.2. 命令安装:amfe-flexible
yarn add amfe-flexible
5.3. 在main.js文件中引入amfe-flexible/index.js
import 'amfe-flexible/index.js'
5.4. 在public/index.html加入meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
5.5. 在package.json项目配置里设置postcss
"postcss": {
"plugins": {
"autoprefixer": {
"overrideBrowserslist": [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
}
5.6. 在浏览器测试
- 这是在plus下的
- 在iPhone6测试一下,看看是否改变了