vue cli 和 vant 移动端项目初始化

vant的安装与配置可见官方文档 快速上手中查看

网址:Vant 4 - Lightweight Mobile UI Components built on Vue

移动端 rem 适配

Vant 中的样式默认使用px作为单位 , 如果需要使用 rem 单位 ,  推荐使用以下两个工具

• postcss-pxtorem 是一款postcss插件 , 用于将单位转换为rem
• lib-flexible 用于设置 rem 基准值

下面我们分别将这两个工具配置到项目中完成 rem 适配

1.使用 lib-flexible 动态设置 rem 基准值 (html标签的字体大小)

安装

npm i amfe-flexible

然后在 main.js 中加载执行该模块

import 'amfe-flexible'

这时候如果手机是iphone 6 7 8 那么可以看到html标签的字体大小为37.5px

2. 使用 postcss-pxtorem 将 px 转为 rem

安装

npm install postcss-pxtorem -D

然后在项目根目录中创建 .postcssrc.js 文件

module.exports = {
  plugins: {
    // 这里因为cli帮我们配置了 所以不需要再配置
    /*     'autoprefixer': {
          browsers: ['Android >= 4.0', 'ios >= 8']
        }, */
    'postcss-pxtorem': {
      // rootValue: 37.5,
      // 如果是vant的样式按照37.5处理 如果是我们自己样式则按75处理 写样式的时候就不需要除以2
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
};

如果报错 请使用5.1.1版本

配置项目@根目录 

// vue.config.js

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
  devServer: {
    port: 9527,
    open: true
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
  }
}

这里@符号就等同于src 例如

@/views/Login  => src/views/Login   9527是端口号和启动项目自动打开项目

基于 axios 封装请求模块

创建 src/utils/request.js

// 封装axios 请求模块
import axios from 'axios'
// 引入vuex中的数据
import store from '@/store/index.js'
// 引入 JSON-bigint 包
import JSONBig from 'json-bigint'
const request = axios.create({
  // 根路径
  baseURL: 'xxxxxx',
  
  // 自定义后端返回的原始数据
  transformResponse: [function (data) {
    try {
      return JSONBig.parse(data)
    } catch {
      return data
    }
    return data
  }]
})

// 请求拦截器
request.interceptors.request.use(config => {
  // 请求发起会经过这里
  // config 本次请求携带的请求配置对象
  const { user } = store.state
  if (user && user.token) {
    // 配置请求头 值为用户的token
    config.headers.Authorization = `Bearer ${user.token}`
  }
  return config
}, function (error) {
  return Promise.reject(error)
})
// 响应拦截器
request.interceptors.response.use(undefined, async error => {
  if(!error.response){
  // 网路超时
  // 逻辑代码
  return Promise.reject(error)
  }
}
export default request