将Vue单个组件导出为Web组件
将Vue单个组件导出为Web组件
提问于 2018-06-01 19:09:54
我有一个Vue应用程序，我在过去的几天里拼凑在一起，定义了一组组件，这些组件将被嵌入到另一个应用程序中；Vue应用程序用于快速开发，并充当组件的测试工具。
我现在已经到了将这些组件添加到主要的非Vue应用程序的点上。我知道我可以使用npm run build -- --target wc构建Web组件，但我不想将整个测试工具应用程序构建到单个组件中；相反，我希望将应用程序中的单个Vue组件构建到单独的可再分发的Web组件中。
我如何才能做到这一点？
回答 2
Stack Overflow用户
发布于 2018-06-01 20:35:19
使用@vue/cli-service-global (目前处于测试阶段)，您确实可以从您的Vue SFC构建Web Components。
您可以通过将组件文件指定为glob in the entry CLI argument来跳过("test harness")应用程序
$ vue-cli-service build --target wc --name foo 'src/components/*.vue'但是，这仍然会构建一个包含所有Custom元素的JS文件。
您可以通过使用Async Web Components目标(即，使用wc-async而不是wc)来进一步解耦这些块中的单个元素：
$ vue-cli-service build --target wc-async --name foo 'src/components/*.vue'然后将生成的HTML文件作为<script>包含在foo.js文件中。它将定义所有的自定义元素，但不会在它们出现在DOM中之前加载它们。
Stack Overflow用户
发布于 2021-01-25 21:40:46
现在，答案是使用官方的@vue/web-component-wrapper库。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50642105
复制相关文章
相似问题
腾讯云开发者
