如何在静态HTML中直接使用其他vuejs组件?

时间:2018-06-27 03:03:02

标签: vue.js vuejs2

我是vuejs的newbee。 我有一个网站,我想在某些页面中使用vuejs。 该页面由laravel,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。 (如果可能,不要使用导入的东西)

我读了文章How to use a VueJS .vue component in a HTML page without a WebPack build process?

他们说“ poi”是最好的解决方案。 在回答的最后,他们说我必须使用"import Component from ..."

我不能在当前的纯HTML页面上使用“导入”。 (因为我不使用webpack等)

有没有人容易告诉我真正的解决方案?

1 个答案:

答案 0 :(得分:3)

如果您不使用 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>