在Vue应用程序外部使用Vue电话号码组件

Question

我有一个静态网站，我想向其中添加Vue组件。我无法识别要添加的组件。称为vue-phone-number-input https://github.com/LouisMazel/vue-phone-number-input它表示VuePhoneNumberInput is not defined。这是我所拥有的：

<script src="../../assets/global/js/vue/polyfill.min.js"></script>
<script src="../../assets/global/js/vue/vue.min.js"></script>
<script src="../../assets/global/js/vue/vue-phone-number-input.umd.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../assets/global/css/vue-phone-number-input.css">

<div id="phone-search">
   <VuePhoneNumberInput class="search-input" v-model="phoneNumber" :only-countries="['US']" @update="onUpdate" />
</div>

new Vue({
      el: '#phone-search',
      components: {
          VuePhoneNumberInput: VuePhoneNumberInput
      },
      data: {
         phoneNumber: null
      }
})

我尝试过VuePhoneNumberInput: 'vue-phone-number-input'，但错误消失了，但该组件仍然无法渲染。我尝试在文档中按原样添加Vue.component('vue-phone-number-input', window.VuePhoneNumberInput.default);，但出现错误Cannot read property 'default' of undefined。我还尝试了他们在文档unpkg.com/vue中也没有使用的其他Vue脚本。 Vue本身在＃phone-search元素中正常工作，只是该组件无法正常工作。

Answer 1

似乎库UMD捆绑包已损坏，因此请避免使用它，而应使用ES6导入来导入库。

这是一个有效的示例：Live Demo