4

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

主.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 文件夹中进行测试？

谢谢

4

2 回答 2

3

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

于 2020-04-06T07:47:59.500 回答
1

您可以创建一个 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({
//...
})

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

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

于 2020-04-05T11:46:16.197 回答