如何自己封装一个VUE3的UI组件库？

  // 打包配置
  build: {
    sourcemap: false, //不开启镜像
    outDir: 'AsaiUI',
    assetsInlineLimit: 8192, // 小于 8kb 的导入或引用资源将内联为 base64 编码
    terserOptions: {
      // 生产环境移除console
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    lib: {
      entry: resolve(process.cwd(), './packages/components/index.ts'), // 设置入口文件
      name: 'asai-ui', // 起个名字，安装、引入用
      fileName: (format) => `asai-ui.${format}.js`, // 打包后的文件名
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue', 'tailwindcss', '@element-plus/icons-vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
          tailwindcss: 'tailwindcss',
          '@element-plus/icons-vue': '@element-plus/icons-vue',
        },
      },
    },
  },

将上面的配置vite.config.ts

文件目录结构如下

打包的入口文件components/index.ts

import { App } from 'vue';
export * from './button';
export * from './tag';

import button from './button';
import tag from './tag';

const components = [button, tag];

export default {
  install(app: App) {
    components.map((item) => item.install(app));
  },
};

 组件的导出文件components/button/index.ts

import AsButton from "./src/as-button.vue";
import { App } from "vue";

export default {
  install(app: App) {
    app.component("AsButton", AsButton);
  },
};

export { AsButton };

组件的Vue文件components/button/src/as-button.vue

<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);

defineProps({
  title: String,
});

const emit = defineEmits(['click']);

const clickEmit = () => {
  count.value++;
  emit('click', count.value);
};
</script>

<template>
  <button class="as-button" @click="clickEmit()">{{ title }}{{ count }}</button>
</template>

<style scoped>
.as-button {
  font-size: 38px;
  background-color: bisque;
}
</style>

打包的包如何使用（发布的话正常NPM去）

1. 项目的入口文件main.ts中引入

// 自封的UI
import AsaiUI from '../AsaiUI/asai-ui.es';
import "../AsaiUI/style.css"

const app = createApp(App);
app.use(AsaiUI);

2. 然后这么调用即可