将两个组件导出为库

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

欢呼声