Vue - 添加没有 webpack 的 CDN 组件

Posted 2023-02-23

【中文标题】Vue - 添加没有 webpack 的 CDN 组件

【英文标题】：Vue - Add CDN component without webpack

【发布时间】：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 上组件的链接。

【参考方案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