项目使用vant框架实现移动端适配

在使用Vant框架进行移动端适配时，可以通过以下步骤来实现：

1. 安装Vant：

npm i vant -S

2. 在项目中引入Vant组件：

import { Button } from 'vant';

3. 使用Vant组件：

<template>
  <van-button type="primary">按钮</van-button>
</template>

4. 移动端适配，可以使用Vant提供的Resize组件或者Viewport组件，也可以自己编写适配代码。

例如，使用postcss-pxtorem自动将px单位转换为rem单位，以下是一个简单的适配示例：

首先安装postcss-pxtorem：

npm i postcss-pxtorem -D

然后在postcss.config.js文件中配置：

module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度的100分之1
      propList: ['*']
    }
  }
};

在这个配置中，rootValue设置为37.5是因为大多数设计稿宽度是750px，通过750px / 100 = 7.5rem，所以1rem等于设计稿的100px，这样就可以方便地将px单位转换为rem，实现响应式布局。

以上步骤和配置可以确保Vant组件在移动端上正确显示和适配。