unplugin-vue-components自动按需导入第三方组件

为什么要使用这个插件

• 在使用第三方组件库的时候, 如果使用的是按需导入 , 就要在每次使用的时候import , 非常的麻烦
• 这个plugin可以实现：实现自动按需加载，和自动导入

使用

• 我们可以用vant组件库配合vite来做个比方 官方地址
• 首先安装插件

// 通过 npm 安装
npm i unplugin-vue-components -D
// 通过 yarn 安装
yarn add unplugin-vue-components -D
// 通过 pnpm 安装
pnpm add unplugin-vue-components -D

然后在vite.config.ts中配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+ import Components from 'unplugin-vue-components/vite'
+ import { VantResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // 解析单文件组件的插件
    vue(),
    // 自动导入的插件，解析器可以是 vant element and-vue 
    Components({
      // 是否在导入的时候自动生成.d.ts类型声明文件 不需要的 vant中已经生成过的
      dts: false,
      // importStyle: false 在用解析器解析组件时 要不要引入样式  
      // 原因：Toast Confirm 这类组件的样式还是需要单独引入，样式全局引入了，关闭自动引入
      resolvers: [VantResolver({ importStyle: false })]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

当然这个插件可以解析不同的第三方组件库 比如element antv这样的都可以
比如我们想作用于element 也是可以的

ps: 一旦用了自动导入插件 , 我们定义在components文件夹下的全局组件也可以直接使用了