Vue - 添加没有 webpack 的 CDN 组件答案

【问题标题】：Vue - Add CDN component without webpackVue - 添加没有 webpack 的 CDN 组件
【发布时间】：2020-02-22 03:24:39
【问题描述】：

我想在不使用 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 上组件的链接。

【问题讨论】：

标签： vue.js vuejs2 cdn

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

谢谢！我如何知道必须在窗口括号内使用的名称？
我只是查看了build.js，并在它不使用 module.export 时将属性“vuejs-autocomplete”添加到window