Vue3+vite+vant 移动端适配

12 篇文章 1 订阅

1.安装npm i vant@next -S
npm i vite-plugin-imp -D
在这里插入图片描述
2.npm install postcss-pxtorem -D
在根目录下创建postcss.config.js在这里插入代码片

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换
    }
  }
}

3在根目录src中新建util目录下新建rem.ts等比适配文件
const baseSize = 37.5
function setRem () {
const scale = document.documentElement.clientWidth / 375
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + ‘px’
}
setRem()
window.onresize = function () {
console.log(“我执行了”)
setRem()
}
在mian.ts引入
import “./utils/rem”
4.npm i -s axios
在src创建utils文件夹,并在utils下创建request.ts

import axios from "axios";
let baseURL = "/api";
const service = axios.create({
  baseURL,
  timeout: 5000 // request timeout
});
// 发起请求之前的拦截器
service.interceptors.request.use(
  config => {
    // 如果有token 就携带tokon
    const token = window.localStorage.getItem("accessToken");
    if (token) {
      config.headers.common.Authorization = token;
    }
    return config;
  },
  error => Promise.reject(error)
);
// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;

    if (response.status !== 200) {
      return Promise.reject(new Error(res.message || "Error"));
    } else {
      return res;
    }
  },
  error => {
    return Promise.reject(error);
  }
);
export default service;

5.api index.ts
在这里插入图片描述
6.请求代理配置
vite.config.ts
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值