在 Vue 应用程序之外使用 Vue 电话号码组件答案

【问题标题】：Use Vue phone number component outside of Vue app在 Vue 应用程序之外使用 Vue 电话号码组件
【发布时间】：2020-02-19 18:31:51
【问题描述】：

我有一个静态网站，我想添加一个 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。我还尝试了他们在文档中的其他 Vue 脚本，unpkg.com/vue，它也不起作用。 Vue 本身在 #phone-search 元素中正常工作，它只是不工作的组件。

【问题讨论】：

如何将VuePhoneNumberInput 导入到 Vue 上下文中？您能否分享包含所有组件导入的 main.js 文件？
我不知道它应该如何导入。在不同的页面上，我使用了不同的 Vue 组件，只需将脚本添加到页面和组件：{VPaginator: VuePaginator}。我不知道为什么这个不一样。我不能使用“导入”。
我刚刚尝试了 UMD 和通常的 ES6 导入方法 - UMD 不起作用，而 ES6 起作用。如果您可以的话，我会说遵循@Hamed Baatour 的解决方案。

标签： javascript vue.js components

【解决方案1】：

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

这是一个工作示例：Live Demo

【讨论】：