Невозможно использовать сторонние компоненты с Vue JS в качестве CDN - PullRequest
Новая
       6

Невозможно использовать сторонние компоненты с Vue JS в качестве CDN

0 голосов
/ 25 июня 2018

Я изучаю Vue JS, чтобы попытаться сделать мое приложение django более интерактивным, и я использую Vue JS в качестве компонентов в моих шаблонах, а не в качестве SPA.это похоже на замену JQuery, потому что я использую версию CDN с помощью тега script в конце элемента body.

проблема, с которой я сталкиваюсь, это когда я пытаюсь использовать сторонние компоненты, которые я нахожубольшинство из них требуют установки npm, и я не совсем уверен, что если я захочу это сделать, я бы предпочел, чтобы все было просто,

, поэтому я пытаюсь использовать сторонние компоненты с CDN, напримерэтот https://github.com/bliblidotcom/vue-rangedate-picker

, но я не знаю, как настроить текущие компоненты для его использования!

Чтобы дать вам представление о том, что я пытаюсь сделать здесь, у меня есть компонент, который обрабатывает форму поиска и отображает данные в таблицу, и я хочу добавить указатель даты в форму поиска и связать датыбыть переданным в качестве параметров в моих вызовах API.

1 Ответ

0 голосов
/ 26 июня 2018

Документация для компонента немного некорректна.Ссылка 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 исправляет это в документах здесь .

...