web移动端项目初始化

1.导入vant

cnpm i vant -S

在 main.js 中加载注册 Vant 组件

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

2.移动端 REM 适配介绍

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

[lib-flexible 用于设置 rem 基准值，设置根字体的大小

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

(1)[安装

cnpm i amfe-flexible -S

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

import 'amfe-flexible'

使用 postcss-pxtorem 将 px 转为 rem

(1)安装

cnpm install postcss-pxtorem -D

(2)在项目根目录中创建 .postcssrc.js 文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

3.封装请求模块

(1)安装 axios

cnpm i axios -S

(2)创建 src/utils/request.js

/**
 * 封装 axios 请求模块
 */
import axios from "axios"

const request = axios.create({
  baseURL: "http://198.110.1.1/" // 基础路径
})

export default request