时间戳

首页 > 解决方案 > 不能使用 Vue JS 作为 CDN 的 3rd 方组件

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

问题描述

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

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

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

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

为了让您了解我在这里尝试做什么，我有一个组件可以处理搜索表单并将数据显示到表格中，我想在我的搜索表单中添加 datepicker 并将日期绑定为作为参数传递我的 API 调用。

标签： javascriptdjangovue.jsvuejs2vue-component

解决方案

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

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

<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>

编辑： PR 在此处的文档中修复此问题。

推荐阅读