Vant组件库的按需引入

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

但是 Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。

本篇文章就来解决这一痛点！！！

第1步：在 main.ts 中全局引入所有样式

# 修改main.ts前需要确保已安装了vant组件库
# pnpm add vant@latest-v3 安装最新的vant3组件库

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import pinia from '@/stores'

# vant样式全局使用
import 'vant/lib/index.css'
# 自定义样式
import '@/styles/main.scss'

const app = createApp(App)

app.use(pinia)
app.use(router)
app.mount('#app')

第2步：安装插件

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

第3步：配置插件

如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

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({
      # 不生成类型声明文件自己写 (选配)
      dts: false,
      # Toast Confirm 这类组件的样式还是需要单独引入，样式全局引入了，关闭自动引入
      resolvers: [VantResolver({ importStyle: false })]
    })
  ]
}

第4步：使用组件

完成以上步骤，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件。

<template>
  <van-button type="primary" />
</template>

End------------------------