将两个组件导出为库

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
}

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

干杯

将两个组件导出为库

Export two components as library

vue.js

vue-cli-3