如何从Codepen中的NPM包导入Vue组件？

Question

我遇到了库的问题我创建了一个库，我试图通过创建一个使用它的简单Codepen来重现/修复。但是，我之前没有使用过Codepen，而且我很难开始使用，因为我以前只是通过ES6导入/导出系统引用内容并让webpack卷起来。

我尝试调试的库在NPM上发布，我尝试通过其unpkg URL导入它。在笔设置中，我还将Vue配置为在其之前导入，因为它要求全局可访问。该库公开了我试图用作默认导出的Vue组件，但在尝试使用它时我得到ReferenceError: ExpandableGrid is not defined。

Here is my pen。为方便起见，我将其复制为以下片段：

＆＃13;

＆＃13;

new Vue({
  el: "#app",
  components: {
    ExpandableGrid
  }
});

＆＃13;

#app {
  width: 100vw;
  height: 100vh;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://unpkg.com/vue-expandable-grid@0.2.0-2/dist/vue-expandable-grid.umd.min.js"></script>

<div id="app">
  <ExpandableGrid />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 组件名称在DOM模板中应为kebab-case。
2. 自闭标签在DOM模板中无效，除了void元素。
3. 使用window ['vue-expandable-grid']。default

   A   B 
1  1   3
2  5
3  6   5 
4  2
5  3   6

   A   B 
1  1   3
2  5
3  6   5 
5  3   6