使用Vue写移动端时解决REM适配问题与AXIOS的封装

       如果要写的项目是一个移动端时，用户需要使用手机访问，手机屏幕大小不一，所以需要去适配各种大小不同的手机，这个时候就需要使用REM适配技术  (解决同一个元素在不同设备中大小的变化)。

1.什么是REM

rem是一个相对单位，它是相对于页面中根标签html中的文字大小 

2.为什么要用REM

因为不同的设备，像素密度不同，根标签文字大小也不同导致同一个文字在不同大小的设备中显示的大小也不一样，所以我们更希望适配的效果是：在大屏的设备中，文字图片等等都大些，在小屏的设备中文字、图片等等 都可以小一些

3.使用REM

在Vant组件库中默认单位都是"px"，使用rem做单位的时候，可以下载两个工具实现rem适配

3.1.postcss-pxtorem 它是一个postcss插件，可以将px单位转化为rem

//设置postcss
//根目录下创建postcss.config.js文件
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

//设置完成后重新运行一下项目，项目中px单位的值自动转换成rem单位

3.2.lib-flexble 它是根据设置屏幕的宽度去动态设置rem的值（html标签上font-size的大小），随着屏幕大小的变化rem值也会发生改变，默认计算方式是设备屏幕宽度的1/10，默认值是37.5

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入Vant所有的组件
import Vant from 'vant'
// 用它的样式
import 'vant/lib/index.css'

// 它会根据的手机尺寸来调整rem的基准值：html标签上的font-size。
 import 'amfe-flexible'

AXIOS的封装

为了调用axios更方便，对axios做一次二次封装，把它封装到一个独立的模块中，在需要发送请求的时候直接加载使用

1.首先需要下载安装：npm install axios

2.创建 src/utils/request.js ，在这个文件中引入axios

import axios from 'axios'

// 创建axios的实例，配置
// 1. 基地址
const request = axios.create({
  baseURL: 'xxxxx'      //注意: baseURL是关键字，不能写错。
})

//可以导出多个
export const request2 = axios.create({
  baseURL: 'xxxxx'
})

// 导出
export default request

为了方便代码重复使用，方便统一修改URL地址还需要创建一个文件夹：创建 api/channel.js 并写入代码

import request from '@/utils/request.js'

export const getChannels = () => {
  // 如果函数没有写return，
  //  它有一个默认的return值，就是undefined
  // return request({
  return request({
    url: 'xxxx', // 接口地址
    method: 'GET'
  })
}

然后使用模块 两个步骤：

1.导入上面封装的api

2.调用

// 1. 导入上面封装api
import { getChannels } from '@/api/channel.js'


async hTestAxios2 () {
  try {
    // 2. 调用
    const res = await getChannels()
    console.log(res)
  } catch (err) {
    console.log(err)
  }
}

//之后项目中所有的涉及接口的请求就都不要直接在组件中直接写了，而是：

//1. 先写成模块中的方法。在src/api/xxxx模块
//2. 再从模块中取出方法来在组件中使用。

 

 

---