vue3中如何按需引入vant组件库并进行rem适配

1.安装vant3组件库

npm i vant

2.安装官方提高插件，它可以自动按需引入组件

# 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

3.如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：（基于其他项目，参考vant3官网）

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

4.与vue2不同，在vue3项目中不需要单独注册注册你需要的组件，可以在项目中直接使用；但是对于函数类组件（如 Toast，Dialog，Notify，ImagePreview），需要单独在你需要使用的页面引入，否则会报类似 Dialog is not defined 的问题

import { Dialog, Toast  } from 'vant';

  

同时必须在你需要使用的页面中引入 vant 样式，否则会样式错乱

// Toast
import { Toast } from 'vant';
import 'vant/es/toast/style';

// Dialog
import { Dialog } from 'vant';
import 'vant/es/dialog/style';

// Notify
import { Notify } from 'vant';
import 'vant/es/notify/style';

// ImagePreview
import { ImagePreview } from 'vant';
import 'vant/es/image-preview/style';

5.如果需要使用 rem 单位进行适配，官方推荐使用以下两个工具：

npm i postcss-pxtorem lib-flexible

6.在main.js中引入（千万别忘记）

// 移动端适配
import 'lib-flexible/flexible.js'

7.新建postcss.config.js文件配置

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

9.使用

<template>
  <van-button type="primary">主要按钮</van-button>
  <van-button type="success">成功按钮</van-button>
  <van-button type="default">默认按钮</van-button>
  <van-button type="warning">警告按钮</van-button>
  <van-button type="danger">危险按钮</van-button>
</template>