导出 vuejs 组件以重用答案

【问题标题】：Export vuejs components to reuse导出 vuejs 组件以重用
【发布时间】：2020-04-29 12:31:33
【问题描述】：

我创建了一个 API。对于他，我使用 vuecli 创建了一个单页界面。我的计划是将它嵌入到我需要的项目中。问题是需要做什么才能导出编写的应用程序并在必要时重用它？

项目结构如截图所示。

src/main.js - 连接和配置 axios
src/App.vue - 我描述了应用程序的主要组件（也许我需要把它放在组件中的一个单独的组件中文件夹）
src/components/OneDay.vue 是第二个组件，主要是多次致电src/App.vue。
src/mixins/dateHandler.js - 两者共有的几个功能组件，它们作为 mixin 连接。

我没有修改任何其他文件。我怎样才能正确地准备它，以便我可以使用 Composer 将这些组件连接到我的其他应用程序？我连接，配置一些变量（例如 api 地址）并将其显示在页面上的正确位置 - 这就是我的看法。

【问题讨论】：

标签： javascript vue.js vue-component vue-cli

【解决方案1】：

您可以尝试使用 VUE CLI 3 创建一个 Web 组件，以便稍后在不同的代码库中使用它。只需确保您的 main.js 文件看起来像这样

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

const CustomElement = wrap(Vue, VueWebComponent);

window.customElements.define('my-custom-element', CustomElement);

并使用vue-cli-service build 和--target wc 构建它

您可以在此处阅读更准确的说明： https://github.com/vuejs/vue-web-component-wrapper https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/

【讨论】：