vue+vant移动端适配

1.创建vue项目

2.安装vant

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

3.手动按需引入插件

在src目录下手动创建一个plugin文件夹,在文件夹下创建vant.js文件

import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button)

4.安装适配插件

cnpm install postcss-pxtorem -S
cnpm install lib-flexible -S

在根目录新建postcss.config.js,示例配置:

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

5.在main.js中

// 按需引入vant组件
import '@/plugin/vant'
// 引入vant组件样式
import 'vant/lib/index.css';
// 引入移动端适配
import 'lib-flexible/flexible.js'

6.移动端底部导航栏

app.vue中

<router-view />
    <layout v-if="$route.meta.showTab"></layout>
    //配置路由meta.showTab判断页面是否需要底部导航

layout.vue

<van-tabbar route v-model="active" @change="onChange">
      <van-tabbar-item replace to="/" icon="wap-home">首页</van-tabbar-item>
      <van-tabbar-item replace to="/about" icon="column">关于</van-tabbar-item>
 </van-tabbar>
 
 data() {
    return {
      active: 0,
    };
  },
  methods: {
    onChange(index) {
      this.active = index;
    },
    
  },//通过index跳转页面

7.如果vue报Parsing error: No Babel config file detected for xxx

template和import都飘红,可以在.eslintrc.js文件添加requireConfigFile: false,