如何使用 Vue CLI 一次将多个 Vue.js 组件构建为原生 Web 组件？

Question

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

ma​​in.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 文件中？

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

谢谢

Answer 1

Version 4.3.0 添加了对 specifying multiple web components 通过逗号分隔的全局模式构建的支持。

例子：

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 组件，以及一个包含所有组件的 demo.html。但是，似乎不支持每个 Web 组件单独的 .js 文件。 Web 组件被捆绑到一个文件中。

Answer 2

您可以创建一个 vue 插件来将 vue 文件捆绑在一起。

// plugin.js

// your components
import Component1 from '/src/components/Component1.vue'
import Component2 from '/src/components/Component2.vue'
import Component3 from '/src/components/Component3.vue'

// This exports the plugin object.
export default {
  install (Vue, options) {
     // Add a component or directive to your plugin, so it will be installed globally to your project.
     Vue.component('component1', Component1)
     Vue.component('component2', Component2)
     Vue.component('component3', Component3)
  }
}


// your main vue file:

import myPlugin from './plugin.js'
Vue.use(myPlugin);

new Vue({
//...
})

现在您可以在任何地方使用插件中包含的所有组件，而无需在每个文件中导入它们。

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