如何立即使用Vue CLI将多个Vue.js组件构建到本机Web组件？

Posted 2021-04-13

我是Vue.js的新手，并希望使用它制作Web组件的SDK。我可以像这样制作一个Web组件：

main.js：

import Vue from 'vue';
import App from './App.vue';
import wrap from '@vue/web-component-wrapper';

const customElement = wrap(Vue, App);

window.customElements.define('sky-chat', customElement);

Cli命令：

vue build --target wc --name sky-chat ./src/main.js

但是这仅是一个组件。如何构建一堆.vue文件以一次将Web组件分离到单独的js文件中？

构建后如何在dist文件夹中自动生成其中包含所有组件的测试html？

谢谢

答案

现在，您可以在任何地方使用插件中包含的所有组件，而不必将其导入每个文件中。

我是否正确理解您的问题？

另一答案

示例：

vue-cli-service build --target wc --name myprefix src/components/core*.vue,src/components/basic*.vue vue-cli-service build --target wc --name myprefix src/components/myFirst.vue,src/components/mySecond.vue

这将为指定的每个入口点生成一个单独的Web组件。但是，似乎不支持每个Web组件单独的.js文件。 Web组件捆绑在一个文件中。