vue3项目中使用Vant和移动端适配

vant安装

vant官网

pnpm add vant

vant引入

main.ts

import 'vant/lib/index.css'

XX.vue

import { Button as VantButton } from 'vant'
<vant-button type="primary">按钮</vant-button>

移动端适配

推荐postcss-px-to-viewport工具，参考这个地址下的浏览器适配模块

pnpm add postcss-px-to-viewport -D

新增postcss.config.js文件，配置如下

// eslint-disable-next-line no-undef
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375
    }
  }
}

重启项目，即可。
重启时遇到如下报错

修改postcss.config.js为postcss.config.cjs即可