Vue3框架Vite引用vant组件方法及相关问题解决方法

项目框架：vite + TS + vant4 (vite用的 Vue3 语法）

注意：本项目使用的Vue3，用的 Vant4。如果使用的Vue2，需使用Vant2。有官方文档可以查阅使用

Vant4官方文档地址：https://vant-contrib.gitee.io/vant/#/zh-CN

Vant安装

可以在项目中通过 npm 进行安装，安装命令如下：

# Vue 3 项目，安装最新版 Vant
npm i vant

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

vant按需引入- - -安装“unplugin-vue-components” 插件

Vite 中使用 Vant 的话，可以使用 “unplugin-vue-components” 插件，这个插件可以按需引入用到的Vant组件，使用Vant 组件时直接在 template模板里使用就可以，不用手动在 ts 脚本里 import导入

1.安装插件方法：

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

2.配置插件：vite.config.ts

vite.config.ts 文件中添加 “unplugin-vue-components” 插件的配置：

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()],
    }),
  ],
};

3.使用组件

示例：

<template>
  <van-field class="van-input" v-model="mobile" type="tel" placeholder="请输入手机号" clearable maxlength="11" />
</template>

4.函数式组件使用注意事项

Vant 中 Toast，Dialog，Notify 和 ImagePreview 组件是函数式组件，需要 import 引入后，再使用，且要引入组件样式，例如：

<script setup lang="ts">
import {
    
     showToast } from 'vant';

showToast('请填写正确的手机号');

</script>

mian.ts 中引入组件样式：

import 'vant/es/toast/style';

其他函数式组件引用示例：

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

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

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

Vant 组件样式相关问题解决方法

1.修改vant 组件样式方法:

引用组件后，在浏览器中打开调试窗口，找到对应要修改样式的组件元素，查看组件元素的类名，重写该类名样式
有时不生效可能是权重不够，叠加类名或者样式添加 “ !important ”

示例：

.van-cell {
    
    
  font-size: 28px!important;
  background: transparent!important;
}

2.vant表单组件清除组件很难点，经常点上去没有清除效果

可能是被遮盖了，设置表单的右边margin 大于清除图标的宽度：

示例：

.van-field__control {
    
    
  margin-right: 15px!important;
}

3.vant 表单清除按钮 PC端失效

①安装模块
npm i @vant/touch-emulator -S
②在 “ main.ts ” 文件中引入模块后自动生效
import ‘@vant/touch-emulator’;

引入适配模块

安装引入后如果没有立即生效，可以重启一下项目，再查看效果

查阅Vant 文档了解到 vant是针对移动端的，PC端下有些组件可能会失效，可以安装 “vant/touch-emulator” 模块解决。

Vant 有 Vue 2 版本、Vue 3 版本、微信小程序版本、 React 版本、支付宝小程序版本。

了解更多vant先关内容可以查阅Vant官方文档~