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

Question

我是 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);

命令行命令：

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

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

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

谢谢

Answer 1

版本 4.3.0添加了对通过逗号分隔的 glob 模式指定要构建的多个 Web 组件的支持。

例子：

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包含所有组件的组件。但是，似乎不支持.js每个 Web 组件使用单独的文件。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({
//...
})

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

我正确理解你的问题吗？