vue 移动端h5引入vant 和echarts的适配

   1.下载插件
 

"lib-flexible": "^0.3.2",
"postcss-pxtorem": "^6.0.0",
"vant": "^2.12.54",复制

2.建vant文件夹按需分配.在入口文件main.js引入

import Vue from "vue";
import { Button } from "vant";
 
// 全局注册
 
Vue.use(Button);
 
 
// 将所有 Toast 的展示时长设置为 2000 毫秒
Toast.setDefaultOptions({ duration: 3000 });
// 将所有 loading Toast 设置为背景不可点击
Toast.setDefaultOptions('loading', { forbidClick: true });
Vue.component(Field.name, {
    extends: Field,
    props: {
      formatter: {
        type: Function,
        default: function (value) {
          return value.replace("  ", "");
        },
      },
    },
  });复制

3.在根目录新建.postcssrc.js(vant组件偏小。根据机型适配vant组件

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      // 基准值
      rootValue({ file }) {
        console.log(file,file.indexOf('vant'))
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*'],
      // 配置不要转换的样式资源
      exclude: /Verifition/i
    }
  }
}复制

4.对于echrat适配移动端，新建font.js.在入口文件man.js引入

export function fontSize(res) {
  let docEl = document.documentElement,
    clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  //获取屏幕宽度，检测是否大于720
  var screen_width = 100
  if(clientWidth < 500){
    screen_width=110
  }
  if(clientWidth>500 &&clientWidth< 900){
    screen_width=100
  } 
  if( clientWidth>900&&clientWidth < 1000){
   
    screen_width=80
  }
  if(clientWidth > 1000 ){
    screen_width=70
  }
  console.log('bb',clientWidth,screen_width)
  if (!clientWidth) return;
  let fontSize = screen_width * (clientWidth / 750);//这里的750是指屏幕的宽度，看设计稿自行更换
  return parseInt(res * fontSize);
}
export default {
  fontSize,
};复制

在echart中设置文字大小使用

 axisLabel: {
            textStyle: {
              fontSize: this.$fontSize.fontSize(0.24),
            },
          },复制

在public文件夹更改index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />复制