Vue-添加不带Webpack的CDN组件

时间:2019-10-25 18:54:20

标签: vue.js vuejs2 cdn

我想在不使用Webpack的情况下将this组件添加到我的Vue.js项目中。

我尝试将其添加到head

<script src="https://cdn.jsdelivr.net/npm/vuejs-auto-complete@0.9.0/dist/build.js"></script>

这到body

<autocomplete :source="[{id:1,name:'abc'},{id:2,name:'def'}]"></autocomplete>

但是发生以下错误:

  

[Vue警告]:未知的自定义元素:自动完成-您是否正确注册了组件?对于递归组件,请确保提供“名称”选项。

我该怎么办?

Here是Github上组件的链接。

2 个答案:

答案 0 :(得分:2)

您需要像下面这样先注册该组件

components: {
   Autocomplete: window["vuejs-autocomplete"]
}

示例

new Vue({
  el: '#app',
  components: {
    Autocomplete: window["vuejs-autocomplete"]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuejs-auto-complete@0.9.0/dist/build.js"></script>

<div id="app">
  <autocomplete :source="[{id:1,name:'abc'},{id:2,name:'def'}]"></autocomplete>
</div>

答案 1 :(得分:1)

您是否已在Vue.components();的{​​{1}}中注册了它?