Question

我正在学习Vue JS，以尝试使django应用更具交互性，并且我将使用Vue JS作为模板中的组件而不是SPA的方法。就像替换JQuery，因此，我在body元素的末尾使用script标签使用CDN版本。

我面临的问题是，当我尝试使用第三方组件时，我发现它们中的大多数都需要安装npm，并且我不确定是否要这样做，我希望保持简单，

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

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

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

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

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

无法将第3方组件与Vue JS一起用作CDN

1 个答案: