1、Axios是什么?
Axios是一个基于promise的HTTP库,类似于jQuery的ajax,用于http请求。可以应用于浏览器端和node.js,既可以用于客户端,也可以用于node.js编写的服务端
1.下载axios
npm install axios
2、引入axios
在utils工具文件夹里新建一个request.js文件, 用import 在vue中导入模块
// 引入axios
import axios from 'axios';
什么是rem?
它是一个相对单位,像px,vh,vw等一样,可以用来表示尺寸单位。rem之所以可以用于自适应布局,是因为rem是一个相对尺寸,它只相对于html根元素来进行计算 所以,在不同的页面大小中,只要改变html根元素的大小,其他所有元素便会跟着改变。
安装使用
Vant 中的样式默认使用 px
作为单位,如果需要使用 rem
单位,推荐使用以下两个工具:
lib-flexible (opens new window)用于设置 rem 基准值
postcss-pxtorem (opens new window)是一款 postcss 插件,用于将单位转化为 rem
1.下载flexible
npm i - S amfe-flexible
2、引入flexible
在utils工具文件夹里新建的request.js文件,用import 在vue中导入模块
// 导入flexible
import 'amfe-flexible'
而后在app.vue测试屏幕适配插件的完成
二、使用 postcss-pxtorem 将 px
转为 rem
1.下载一个插件使px单位运行项目的时候自动变成rem单位(postcss-pxtorem 后css处理器(之前用的less是预css处理器))
2.下载postcss-pxtorem
npm install postcss postcss-pxtorem --save-dev
3.安装完成后,在和src平级的文件里新建一个.postcssrc.js
配置文件再复制配置代码
4、配置完毕,重新启动服务
最后测试:刷新浏览器页面,审查元素的样式查看是否已将 px
转换为 rem
。