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 的相关文章

  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 如何切换各个
  • 元素的类?
  • 当我切换变量时active在下面的代码中 activeCSS 类应用于列表中的所有元素 从列表中的所有元素中删除 如何单独定位列表元素 Todo List 示例具有类似的功能 待办事项 待办事项已完成 但它有点超出了我的技能范围 ul li
  • Eslint 状态已声明 [Vuex]

    我正在运行 ESLint 目前遇到以下 ESLint 错误 错误 状态 已在上部范围无阴影中声明 const state date show false const getters date state gt state date show
  • 通过 declarativeNetRequest + extensionPath 重定向时获取原始 URL

    我需要在导航时但在用户从使用设置的规则重定向之前获取 chrome 选项卡的 urldeclarativeNetRequest 目前 用户可以使用上下文菜单添加规则 当尝试访问过滤的主机时 它将被重定向到内部扩展页面 chrome cont
  • Vuejs Ajax 调用和 dataTable

    I m using Vuejs and dataTable for one of my project I make an Ajax call and push data into an array After that I use v f
  • 如何将Vue包装的对象转换为普通对象

    我需要将对象类型的数据变量分配给普通变量 const myVue new Vue el myVue data vars show Form methods assign vars const new vars this vars html
  • 删除Vue子组件

    我真的被这个问题困扰了 我创建了一个由子组件组成的 Vue 2 0 组件 它全部都是 Webpacked 等 例如 这是父组件 div h1 This is just a title for lulz h1 div
  • Vue 开发样板中的随机错误“以太坊未定义”

    我正在尝试使用 vue cli 创建的 Vue 基本样板在一个非常基本的 Vue3 组件中实现 web3 但我有一些奇怪的错误 首先 这是我的组件的代码
  • Firestore onSnapshot() 方法多次触发

    我有一个带有多个路由和 vuex 的 vue cli 4 应用程序 Firestore 数据库已成功连接 我的应用程序立即反映从 Firestore 控制台应用于数据库的修改 在离开包含与 Firestore 同步 的组件的路线然后返回后
  • 使用 vue-cli 服务时如何禁用 linting?

    我正在使用以下命令使用 vue cli 运行我的项目 vue cli service 服务 open 如何禁用所有 linting 目前每次保存时都会重新进行 linting 并且更改代码需要很长时间 我已经把 lintOnSave fal
  • Vue-动态导入vue组件

    我有很多组件 我想按需导入 我有一个下拉菜单 其中实际上包含组件列表 即要加载的内容 我试过这个例子
  • 如何在 NuxtJs 路由中使用 *(星号)?

    在 vue cli 生成的普通 Vue 不是 Nuxt 项目中 使用 在 vue router 中这样工作 export default new Router routes path about name about component A
  • Vue 3 输入模式

    我想创建输入 如果模式不匹配 我可以用空字符替换输入的字符 模板
  • 在 vuejs 上将 \n 替换为新行

    我正在尝试将 n 字符替换为来自端点的数据的新行 I tried p item licensedocument legal documentText replace r n r n g br p 并没有奏效 当我将replace 写入问题末
  • 如何在vuetify中设置固定工具栏?

    在 vuetify 中我使用工具栏
  • Vuetify:v-ripple 只能用于块级元素

    我今天刚开始收到此错误 它破坏了我的整个网站 因为我像个傻瓜一样在页面加载时加载 Vuetify 有谁知道这意味着什么或如何解决它 谷歌搜索没有发现任何有用的信息 Edit 对于因网站也损坏而发现此问题的任何人 这可能是因为您加载的位置vu
  • Vue - 调度完成后调用 store getter?

    我正在使用 Laravel 5 7 Vue2 Vuex 我在调度调用完成后让 Vue 返回存储值时遇到一些困难 我的申请流程如下 我单击一个提交按钮 该按钮调用组件上的 validate Validate 分派到我的 addLease 操作
  • 通过 JSONP 通过 CDN 传输静态 JSON 文件

    我有大量 JSON 格式的静态 很少变化的数据 为了提高我的 ASP NET MVC 应用程序性能 我想将它们移动到 CDN Amazon Cloud Front 然而 当我这样做时 跨域策略启动 jQuery 进行 HTTP OPTION
  • 我应该如何处理 Vuex 中的事件?

    我习惯使用全局事件总线来处理跨组件方法 例如 var bus new Vue Component A bus emit DoSomethingInComponentB Component B bus on DoSomethingInComp
  • Vue Router - 使用 Vue 2 Composition API 获取路由参数

    我正在使用Vue 2 组合 API https github com vuejs composition api并想从我的 Vue Router 访问路由参数setup method 如中所述Vue 路由器文档 https next rou

随机推荐

  • 如何将参数传递给通过 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