Vue - 在没有 webpack 的情况下添加 CDN 组件

Question

我想在不使用 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 warn]: Unknown custom element: autocomplete - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我该怎么办？

Here 是 link 到 Github 上的组件。

Answer 1

你在 main.js 的 Vue.components(); 中注册了吗？

Answer 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>

Vue - 在没有 webpack 的情况下添加 CDN 组件

Vue - Add CDN component without webpack

cdn

vue.js

vuejs2