如何利用 `Vite` 的 `lib` 模式，将 Vue 组件库打包为多种格式，并支持按需引入？

大家好，我是你们的老朋友，今天咱们来聊聊如何用 Vite 的 lib 模式，像变魔术一样，把你的 Vue 组件库打包成各种口味，还能按需点单，简直不要太方便！

开场白：组件库打包，不能只是“一锤子买卖”！

话说，咱们辛辛苦苦撸出来的 Vue 组件库，如果打包出来只能一股脑儿地全部引入，那简直就是暴殄天物，浪费用户的带宽和感情嘛！想像一下，用户只想用你库里的一个按钮，结果却要下载整个“豪华套餐”，这体验，简直惨不忍睹！

所以，组件库打包，必须得支持按需引入，就像去餐厅吃饭，想吃啥点啥，多自由！而 Vite 的 lib 模式，就是实现这个目标的利器。

第一幕：vite.config.js 里的乾坤大挪移

首先，咱们得在 vite.config.js 里动动手脚，告诉 Vite，咱们要用 lib 模式打包。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts' // 用于生成 .d.ts 类型文件

// 导入 path 模块
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(