将两个组件导出为库

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

干杯