Vue3 vant组件库自动导入

实现：完整使用vant组件库
文档

安装：

# Vue 3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant

【一】按需引入：

https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi

【二】批量引入

在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。

注意：该插件不会自动引入 函数式组件 样式，详情查看：

https://blog.csdn.net/m0_73461567/article/details/129191725?spm=1001.2014.3001.5501

1. 安装 unplugin-vue-components 插件：

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

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

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

2. vite.config.ts 配置插件，关闭自动生成类型声明文件

+ import Components from 'unplugin-vue-components/vite';
+ import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    vue(),

    Components({
+     dts: false, // 关闭：自动生成 组件类型声明文件
+     resolvers: [VantResolver()],
      // resolvers: [VantResolver({ importStyle: false })]
    })

  ],
  server: {
    port: 3200,
    open: true
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3. 使用：

<script setup lang="ts">
</script>

<template>
  <!-- 直接使用vant组件 -->
  <van-button>按钮</van-button>
</template>

<style scoped></style>