vite 搭建组件库，实现按需引入

要在 Vite 中搭建组件库并实现按需引入，可以按照以下步骤进行：

1. 创建一个 Vue 3 项目并安装 Vite

2. 在项目中安装所需的 UI 组件库，如 Element Plus、Ant Design Vue 等

3. 在项目根目录下创建一个名为 `vite.config.js` 的文件，并在其中配置按需引入的插件，如 `style-import` 插件和 `babel-plugin-import` 插件

4. 在组件库中使用 `export` 关键字将组件导出，在需要使用组件的项目中使用 `import` 关键字按需引入组件

以下是一个示例的 `vite.config.js` 配置文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import babel from '@rollup/plugin-babel'

export default defineConfig({
  plugins: [
    vue(),
    babel({
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    }),
    styleImport({
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/css`
          },
        },
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`
          },
        },
      ],
    }),
  ],
})

在上述配置中，我们使用了 `style-import` 插件和 `babel-plugin-import` 插件来实现按需引入。其中，`style-import` 插件用于按需引入组件库的样式，`babel-plugin-import` 插件用于按需引入组件库的组件。

最后，我们在组件库中使用 `export` 关键字将组件导出，如下所示：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      required: true,
    },
  },
}
</script>

在需要使用组件的项目中，我们可以使用 `import` 关键字按需引入组件，如下所示：

<template>
  <div>
    <MyComponent message="Hello, world!" />
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent,
  },
}
</script>

这样就可以实现在 Vite 中搭建组件库并实现按需引入了。