javascript - 在 Vue 应用程序之外使用 Vue 电话号码组件

Question

我有一个静态网站，我想向其中添加 Vue 组件。我无法让它识别我尝试添加的组件。它称为 vue-phone-number-input https://github.com/LouisMazel/vue-phone-number-input它说VuePhoneNumberInput未定义。这是我所拥有的:

<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 '未定义。我还尝试了文档中的其他 Vue 脚本 unpkg.com/vue ，它也不起作用。 Vue 本身在#phone-search 元素中正常工作，它只是不工作的组件。

Answer 1

库 UMD bundle 似乎已损坏，因此请避免使用它并使用 ES6 导入来导入库。

这是一个工作示例:Live Demo