unplugin-vue-components/vite自动将项目中使用的 Vue 组件按需引入

unplugin-vue-components 是一个 Vite 插件，它可以自动将项目中使用的 Vue 组件自动按需引入，以减小打包体积。它的使用方式如下：

1. 安装插件：

   npm install -D unplugin-vue-components
   1

2. 在 vite.config.js 中配置插件：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import Components from 'unplugin-vue-components/vite'
   
   export default defineConfig({
     plugins: [
       vue(),
       Components({
         // 配置插件选项
       })
     ]
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

3. 配置插件选项，例如：

   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
   
   export default defineConfig({
     plugins: [
       // ...
       Components({
         resolvers: [
           ElementPlusResolver()
         ],
         dts: 'src/components.d.ts'
       })
     ]
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

   在上面的代码中，我们使用了 ElementPlusResolver 来解析 Element Plus 组件库中的组件。dts 选项指定了生成的 TypeScript 类型文件的路径。

   unplugin-vue-components 还提供了许多其他的选项和解析器，可以根据项目需要进行配置。

使用 unplugin-vue-components 插件后，我们可以在项目中直接使用组件，而无需手动引入。例如：

<template>
  <div>
    <el-button>Click me!</el-button>
  </div>
</template>
1
2
3
4
5

在上面的代码中，我们直接使用了 Element Plus 组件库中的 el-button 组件，而无需手动引入。插件会自动将该组件按需引入到项目中。