Vue3中引入使用vant组件的教程详解
作者：Saga Two
Vant是一个强大的移动端组件库，目前Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。本文主要介绍vue3中的vant组件引入使用。
1.安装
vue3中使用如下命令通过 npm 安装（本人项目使用的安装方式）
# Vue 3 项目，安装最新版 Vant npm i vant
也可以使用其他的包管理起进行安装：
# 通过 yarn 安装 yarn add vant # 通过 pnpm 安装 pnpm add vant # 通过 Bun 安装 bun add vant
2.引入
Vant分为全局引入和按需引入两种方式，一般在工程项目中，由于全局引入会导致不必要的资源加载，为提升项目性能，建议进行按需引入。以下我们对两种引入方式进行介绍。
2.1 全局引入
全局引入就是在项目入口（main.ts）文件直接引入组件以及组件全部的样式文件；代码如下所示：
// main.ts
import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
const app = createApp();
// 3. 注册你需要的组件
app.use(Button);
app.mount('#app')2.2 按需引入
在vue3中按需引入Vant，需要使用其他的插件辅助，需要安装自动引入组件插件unplugin-vue-components 和Vant 官方提供的 自动导入样式的解析器 @vant/auto-import-resolver这两款插件；安装方法如下：
npm install -D unplugin-vue-components @vant/auto-import-resolver
然后再vite或者webpack配置中添加相应的配置，如下所示：
2.2.1 vite项目:vite.config.js
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver';
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
})2.2.2 Webpack项目：webpack.config.js
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { VantResolver } = require('@vant/auto-import-resolver');
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
}2.2.3 配置在vue.config.js中
导入方法相同：
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { VantResolver } = require('@vant/auto-import-resolver');
module.exports = defineConfig({
configureWebpack: {
plugins: [
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
}
})3.使用
引入完毕之后，unplugin-vue-components 会解析模板并自动注册对应的组件, @vant/auto-import-resolver 会自动引入对应的组件样式。我们可进行按需引入需要使用的组件，使用方法如下，引入input组件和button组件
<template>
<div>
<label>vant示例</label>
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item>vant-swipe</van-swipe-item>
<van-swipe-item class="dif">2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
</div>
</template>
<style>
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
background-color: #39a9ed;
}
.my-swipe .dif {
background-color: #ccdba3;
}
</style>效果如下：
此外Vant中还有其他组件，基本能满足开发需求，提升开发效率，详情请见官网：Vant
注：在vue3中，由于vite打包拥有良好的性能，本文使用的示例为vite打包方式，同时建议使用其他包最新的支持版本进行开发。
到此这篇关于Vue3中引入使用vant组件的教程详解的文章就介绍到这了,更多相关Vue3 vant内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！