Vue-添加不带webpack的CDN组件

Question

我想在不使用webpack的情况下将此组件添加到我的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 warn]：未知自定义元素：自动完成-您正确注册了组件吗？对于递归组件，请确保提供"name"选项。

我该怎么办？

这是Github上组件的链接。

Answer 1

您需要像下面的一样首先注册该组件

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>

Answer 2

您是否在main.js的Vue.components();中注册了它？