정적 HTML에서 직접 다른 vuejs 컴포넌트를 사용하는 방법

정적 HTML에서 직접 다른 vuejs 컴포넌트를 사용하는 방법

나는 vuejs의 새벌이다.웹사이트가 있는데 어떤 페이지에서 vuejs를 사용하고 싶어요.페이지는 larabel, jquery 등으로 작성되어 있으며, 해당 페이지의 특정 영역에 vuejs 드래그 가능 컴포넌트를 사용하고 싶습니다.

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

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

누구나 Vuejs는 서비스를 쉽게 시작할 수 있다고 말합니다.하지만 난 아냐.WebPack 빌드 프로세스 없이 기존 HTML 페이지에서 위의 vue 컴포넌트를 사용하고 싶습니다.

즉, 나는 오직

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

플레인 html과 js만 사용할 수 있습니다.(가능하다면 Import를 사용하지 마십시오.)

WebPack 빌드 프로세스 없이 HTML 페이지에서 VueJs.vue 컴포넌트를 사용하는 방법 기사를 읽었습니다.

그들은 "포이"가 가장 좋은 해결책이라고 말했다.마지막으로 '컴포넌트 Import from...'을 사용해야 한다고 합니다.

현재 플레인 html 페이지에서 "가져오기"를 사용할 수 없습니다.(웹팩 등을 사용하지 않기 때문에)

진짜 해결책을 쉽게 알려줄 수 있는 사람이 있나요?

웹 팩을 사용하지 않는 경우 .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>

언급URL : https://stackoverflow.com/questions/51053951/how-do-i-use-other-vuejs-component-directly-in-my-static-html