Vue-添加不带Webpack的CDN组件 [英] Vue - Add CDN component without 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警告]：未知的自定义元素：自动完成-您是否正确注册了组件？对于递归组件，请确保提供名称选项。

我该怎么办？

此处是Github上该组件的链接。

解决方案

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

 组件：{
自动完成：window [ vuejs-autocomplete] 
} 
  

示例

  new Vue（{el：' #app'，组件：{自动填充：window [ vuejs-autocomplete]}}） 

 <脚本src = https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js>< / script><脚本src = http s：//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>  

I want to add this component to my Vue.js project without using webpack.

I've tried adding this to the head:

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

And this to the body:

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

But the following error happens:

[Vue warn]: Unknown custom element: autocomplete - did you register the component correctly? For recursive components, make sure to provide the "name" option.

What should I do?

Here's the link to the component on Github.

解决方案

You need to register that component first like below

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

Example

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组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！