Vue项目中安装Vant
# Vue 3 项目，安装最新版
Vant npm i vant
组件按需引入配置
Vant按需引入- - -安装：unplugin-vue-components 插件
unplugin-vue-components 插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）
使用此插件后，不需要手动编写 import { Button } from 'ant-design-vue'这样的代码了，插件会自动识别 template中使用的自定义组件并自动注册。
unplugin-vue-components 是由 Vue官方人员开发的一款自动引入插件，可以省去比如 UI 库的大量 import 语句。
1.安装插件
# 通过 npm 安装
npm i @vant/auto-import-resolver unplugin-vue-components -D#或者
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add @vant/auto-import-resolver unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add @vant/auto-import-resolver unplugin-vue-components -D
# 通过 bun 安装
bun add @vant/auto-import-resolver unplugin-vue-components -D
2.配置插件
1、如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
export default {
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
};
2、如果是基于 vue-cli 的项目，在 vue.config.js 文件中配置插件：
const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
configureWebpack: {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()],
}),
],
},
};3、如果是基于 webpack 的项目，在 webpack.config.js 文件中配置插件：
const { VantResolver } = require('@vant/auto-import-resolver');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
module.exports = {
plugins: [
ComponentsPlugin({
resolvers: [VantResolver()],
}),
],
};
组件中使用
1、示例：
<template>
<van-button type="primary" >按钮 </van-button>
</template>2、函数式组件使用注意事项
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';
3、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端失效
1、安装模块
npm i @vant/touch-emulator -S
2、在 “ main.ts ” 文件中引入模块后自动生效
import ‘@vant/touch-emulator’
安装引入后如果没有立即生效，可以重启一下项目，再查看效果
查阅Vant 文档了解到 vant是针对移动端的，PC端下有些组件可能会失效，可以安装 “vant/touch-emulator” 模块解决。
Vant 有 Vue 2 版本、Vue 3 版本、微信小程序版本、 React 版本、支付宝小程序版本。文章来源：https://www.toymoban.com/news/detail-752141.html
了解更多vant先关内容可以查阅Vant官方文档~
文章来源地址https://www.toymoban.com/news/detail-752141.html
到了这里，关于Vant 移动端UI 组件自动引入的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
