vue.js - 将两个组件导出为库

Question

我有一个 TypeScript Vue 项目。在这个项目中，我有两个组件:Cookiebar 和 CookiebarOpener (CbOpener)。我的目标是将这两个组件导出为一个库，这样我就可以在三个不同的网站上使用它们，例如:

<p>Some website content</p>
<div id="app">
    <cookiebar></cookiebar>
    <span>Other website content<span>
    <cbopener>
       <span>Open layer</span>
    </cbopener>
</div>

我尝试通过导出库"build-cookiebar": "vue-cli-service build --target lib --name cookiebar src/components/cookiebar.vue src/components/cbopener.vue "但只有没有 cbopener 的 cookiebar 被导出。

你有什么猜测吗？

Answer 1

你的构建命令应该是:

vue-cli-service build --target lib --name dummylib src/main.js

因此你的 src/main.js 文件应该看起来像这样:

import cookiebar from './src/components/cookiebar.vue'
import cbopener from './src/components/cbopener.vue'

export default {
  cookiebar,
  cbopener
}

我实际上已经写了一篇关于这个主题的完整文章，您可以在这里找到:https://medium.com/@olivierpicault/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751

干杯