Vue - 添加 CDN 组件,无需 webpack

2024-02-25

我想添加this https://cdn.jsdelivr.net/npm/vuejs-auto-complete@0.9.0/dist/build.js不使用 webpack 的情况下将组件添加到我的 Vue.js 项目中。

我尝试将其添加到head:

<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/build.js"></script>

而这对于body:

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

但出现以下错误:

[Vue warn]:未知的自定义元素:自动完成 - 您是否正确注册了组件?对于递归组件,请确保提供“名称”选项。

我应该怎么办?

Here https://github.com/charliekassel/vuejs-autocomplete是 Github 上该组件的链接。


您需要先注册该组件,如下所示

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/[email protected] /cdn-cgi/l/email-protection/dist/build.js"></script>

<div id="app">
  <autocomplete :source="[{id:1,name:'abc'},{id:2,name:'def'}]"></autocomplete>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue - 添加 CDN 组件,无需 webpack 的相关文章

随机推荐

  • 如何将参数传递给通过 Assembly.CreateInstance 加载的 C# 插件?

    我现在拥有的 成功加载插件 是这样的 Assembly myDLL Assembly LoadFrom my dll IMyClass myPluginObject myDLL CreateInstance MyCorp IMyClass
  • itertools.cycle().next()?

    嗯 我正在使用itertools cycle next 方法与Python 2 6 6 但现在我更新到3 2我注意到itertools cycle 对象没有方法next 我用它来循环一个字符串spin 的方法Spinner班级 所以如果我们
  • 自定义列表定义 + 自定义内容类型 = 仅显示一个表单字段?

    尝试使用功能来部署自定义字段 内容类型和列表 到目前为止 我有一个引用自定义和内置字段的内容类型 内容类型继承 Item 0x01 现在 我创建引用内容类型和字段 内置和自定义字段 的自定义列表定义 我明确设置ShowInDisplayFo
  • 如何将 Eclipse (helios) 项目移动到不同的工作区?

    首先 Eclipse 不是我的原生 IDE 我对它还算不上熟练 我在工作区中设置了一个项目 该项目实际上位于另一个客户项目的目录中 我并没有真正遵循整个工作区 项目的情况 事实上 现在我什至找不到要打开的 Eclipse 工作区文件它 我想
  • 通过 Gradle 和 Android NDK 强制 CMake 处于详细模式

    我正在使用 Gradle 和 CMake 从命令行编译 Android NDK 项目 以前 我使用 Ant 和ndk build但我正在尝试将项目完全迁移到 Gradle 和 CMake In my build gradle我有以下几行来调
  • 为什么AWS SQS这么慢?

    我一直在测试发送消息和从 SQS 队列接收消息所需的时间 平均需要 800 1200 毫秒 这似乎是一个非常长的时间 这是我的测试代码 如果我做错了什么 请告诉我 var t0 sendMessage hello function send
  • PHP sqlsrv:从函数传递资源

    PHP 5 4 14 SQL Server 2012 SQL 客户端 2012 Windows 2008 R2 我有一个函数 简化版本如下 我调用它来运行 SQL 查询 它工作正常 连接到数据库 运行查询并获取有效资源 问题是返回的资源为空
  • Spring RESTful客户端:根标签异常

    我正在尝试按照此示例使用 RestTemplate 解析 RESTFull 调用的结果http thekspace com home component content article 57 restful clients in sprin
  • C# 在面板上绘图

    我正在制定一天的时间表 并用面板代表时间段 而约会则在顶部有更多面板 用户可以上下滚动 以便他们可以看到的范围提前或推迟 当约会超出可见范围的末尾时 我希望有一个锯齿形指示约会超出了可见范围 我已经确定了发生这种情况的情况 并调用了一个私有
  • XCode 4 中的“构建后测试”选项不起作用

    所以 我花了很长时间才弄清楚这个问题 我环顾四周 似乎找不到任何这方面的信息 我想要做的是让我的单元测试始终在每次我在 XCode 中构建代码时运行 我读过很多帖子 包括这个问题 https stackoverflow com questi
  • 使用加速度计计算距离

    在阅读了许多关于如何根据加速度数据测量距离的论坛之外的研究和论文之后 我找到了双重积分方法 但是与该方法相关的误差很大 并且随着时间的推移而增加 此外 我发现一些人建议卡尔曼滤波器 我读了一些有关它的参考资料 但我不清楚如何使用它 还有一些
  • 为各种 Typescript 输入文件定制特定的输出文件

    我有一个使用 TypeScript 的 Web 项目 它对编译的输出文件有一些相当复杂的要求 例如 我需要将一个目录中的所有 ts 文件编译为一个 js 文件 并将另一目录中的所有 ts 文件编译为不同的 js 文件 它比这更复杂 但你明白
  • 如何在 Mac OS X 上将 CALayer 添加到 NSView

    我正在尝试学习如何使用和实施CALayer在 Mac Objective C 应用程序中 但我似乎无法做最基本的事情 添加一个新图层并设置其背景颜色 框架大小 谁能看到我的代码有什么问题吗 CALayer layer CALayer lay
  • 如何为 Kubernetes 作业设置时间限制?

    我想启动一项 Kubernetes 作业并给它一个固定的完成期限 如果截止日期到来时 Pod 仍在运行 我希望该作业自动被终止 这样的事情存在吗 起初我以为工作规范是activeDeadlineSeconds涵盖了这个用例 但现在我看到了a
  • 当我在容器中运行节点服务器时出现“express.default is not a function”错误

    当我在远程容器内运行节点服务器时 我收到了 express default is not a function 错误 有什么线索吗 main ts 文件 import as express from express const server
  • 如何调用 iPhone 地图获取以当前位置作为起始地址的路线

    我知道可以通过调用来启动 iPhone 地图应用程序openURL在带有参数的谷歌地图 URL 上saddr and daddr带有位置字符串或纬度 经度 参见下面的示例 但我想知道是否可以将起始地址设为 当前位置 地图书签 以便我可以使用
  • 如何在 php 中使用 Spreadsheet_Excel_Writer() 在 Excel 单元格中输出超过 255 个字符?

    我试图在 Excel 电子表格中输出几段文本 但现在文本被截断为仅显示 255 个字符 代码非常简单 xls new Spreadsheet Excel Writer sheet xls gt addWorksheet name forea
  • 查看监听集合事件

    我有一个看法myView和一个集合myCollection 当我add一个模型myCollection the add事件被触发myCollection 我怎样才能拥有myView听听那个add event 您可以在实例化集合时将集合传递给
  • Android:RadioButton Toast 中的帮助

    如果用户单击 下一步 按钮而不选择选项 则必须显示一条消息 请选择任何一个 否则它应该转到下一个屏幕 我已经尝试过 但它不会进入下一个屏幕 而是显示吐司 请选择任何一个 和我的代码 public class Question1 extend
  • Vue - 添加 CDN 组件,无需 webpack

    我想添加this https cdn jsdelivr net npm vuejs auto complete 0 9 0 dist build js不使用 webpack 的情况下将组件添加到我的 Vue js 项目中 我尝试将其添加到h