Vue.js 打包vue3组件和用法

我在

vue.js3

上发布了一个包。将它安装到一个项目中，它可以正常工作。但在单独导入组件时存在一些问题。对于

vue2.js

示例，可以单独导入vuesax库，如下所示

import Vue from 'vue'
import { vsButton, vsSelect, vsPopup } from 'vuesax'
import 'vuesax/dist/vuesax.css'

Vue.use(vsButton)
Vue.use(vsSelect)
Vue.use(vsPopup)

我应该如何在

vue3.js

中导出和构建/发布我的组件，以便像上面那样导入？这就是我的index.js在构建/发布包之前的样子

import { createApp } from 'vue'
import myComponent from "./my-component"
const components = {
    myComponent,
}
Object.keys(components).forEach(name => {
    createApp().component(name, components[name]);
})

export default components;

这就是我导入组件的方式

模板

<my-component />

---

导出多个组件和单独使用的

vue3.js

方法是什么…

在库的

index.js

中，您可以导出组件本身，以便应用程序可以像示例中那样导入它们

createApp（）.component（）

从您的库中开始不会全局注册您的组件。为此，库必须导出一个Vue插件，该插件在给定的Vue实例上注册组件。

import {components} from 'myLibrary'
export default {
  name: 'App',
  components: {
    ...components
  }, 
}