vue+vant 实现 rem的转换
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测试一下,看看是否改变了