不能使用 Vue JS 作为 CDN 的 3rd 方组件

Posted 2023-02-23

【中文标题】不能使用 Vue JS 作为 CDN 的 3rd 方组件

【英文标题】：Can't use 3rd party components with Vue JS as CDN

【发布时间】：2018-12-04 10:42:47

【问题描述】：

我正在学习 Vue JS 以尝试使我的 django 应用程序更具交互性， 我打算在我的模板中使用 Vue JS 作为组件，而不是作为 SPA。 这就像 JQuery 替换， 因此，我在正文元素末尾通过脚本标记使用 CDN 版本。

我面临的问题是，当我尝试使用 3rd 方组件时，我发现它们中的大多数都需要安装 npm，而且我不太确定是否要这样做，我宁愿保持简单，

所以我正在尝试将第 3 方组件与 CDN 一起使用，例如这个 https://github.com/bliblidotcom/vue-rangedate-picker

但我不知道如何配置我当前的组件来使用它！

为了让您了解我在这里要做什么， 我有一个处理搜索表单并将数据显示到表格中的组件， 我想在我的搜索表单中添加日期选择器并将日期绑定为我的 API 调用中的参数。

【问题讨论】：

github.com/bliblidotcom/vue-rangedate-picker#browser 和 bliblidotcom.github.io/vue-rangedate-picker/demo/src/main.js

我是否需要定义一个名为 'rangedate-picker' 的 Vue 组件才能使其工作？那么我可以在我当前的组件中使用这个组件并交换数据吗？或者有没有办法直接将它放在我当前的组件中？ @伯特

在上面的第二个链接中有一行，VueRangedatePicker.default.install(Vue)。这将创建一个名为 vue-daterange-picker 的全局组件。

@Bert，当我使用它时，它会记录和错误：未捕获的 ReferenceError: VueRangedatePicker 未定义

你任由库开发者摆布。有时他们只给你一个 .vue 文件（你必须编译它），有时他们给你一个可以使用的 dist 文件夹。最好的办法是通读文档并查看他们创建的任何演示，看看他们是如何做到的。

【参考方案1】：

组件的文档有点不正确。浏览器 CDN 链接将不起作用 - 您需要 /dist 文件。这是一个最小的工作演示。

假设您还包含来自 CDN 的 Vue，您可以这样做

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"> 
</script>
<script src="https://unpkg.com/vue-rangedate-picker/dist/vue-rangedate-picker.min.js">
</script>

<div id="app">
  <vue-rangedate-picker 
    @selected="onDateSelected" i18n="EN" format="YYYY-MM-DD hh:mm:ss">
  </vue-rangedate-picker>
</div>
</body>

<script>
document.addEventListener("DOMContentLoaded", () => 
  VueRangedatePicker.default.install(Vue)

  new Vue(
    el: "#app",
    methods: 
      onDateSelected() 
      
    
  )
)
</script>
</html>

编辑：在文档here 中修复此问题。