Как использовать другой компонент vuejs непосредственно в моем статическом HTML?

Question

Я новичок в Вуэйс. У меня есть веб-сайт, и я хочу использовать vuejs на какой-то странице. Страница построена с помощью laravel, jquery и т. Д., И я хочу использовать перетаскиваемый компонент vuejs в определенной области на этой странице.

https://kutlugsahin.github.io/vue-smooth-dnd

https://github.com/SortableJS/Vue.Draggable

Все говорили, что Vuejs - это хорошо, если вы легко запускаете сервисы. Но не для меня. Я хочу использовать вышеуказанный компонент vue на моей существующей HTML-странице без процесса сборки WebPack.

Это означает, что я буду использовать только

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

и просто HTML и JS. (если возможно, не используйте импортные вещи)

Я прочитал статью Как использовать компонент VueJS .vue на странице HTML без процесса сборки WebPack? ,

Они сказали, что "пои" - лучшее решение. В конце ответа они сказали, что я должен использовать "Компонент импорта из ..." .

Я не могу использовать "импорт" на моей текущей простой HTML-странице. (потому что я не использую веб-пакет и т. д.)

Есть ли кто-нибудь, кто легко подскажет мне реальное решение?

Answer 1

Если вы не используете Webpack, вы можете просто включить файлы .js на свою HTML-страницу - либо использовать CDN, либо локальные файлы (вы можете получить их, введя ссылки ниже и сохранить как ...) :

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>

Быстрый пример:

var vm = new Vue({
  el: '#app',

  data() {
    return {
      list: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE', 'FFF']
    };
  }
});

body {
  font-family: "Open Sans", sans-serif;
}

.drag-container {
  margin: 5px 10px;
  display: flex;
}

.drag-item {
  border: 1px solid grey;
  padding: 2px;
  margin: 5px;
  cursor: move;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>

<div id="app">
  <h1>Vue Dragable Test</h1>

  <draggable :list="list" class="drag-container">
    <div v-for="item in list" class="drag-item">{{ item }}</div>
  </draggable>

</div>