如何在没有 webpack 的情况下使用 Vue.Draggable CDN？答案

【问题标题】：How to use Vue.Draggable CDN without webpack?如何在没有 webpack 的情况下使用 Vue.Draggable CDN？
【发布时间】：2020-05-04 06:20:07
【问题描述】：

我是 Vue 的新手。我客户的 CodeIgniter 网站上的其中一个页面（销售视图）需要使用 Vue，所以我将其包含在

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

我在一个名为 salesview.js 的文件中声明了 Vue 及其组件。现在，我需要使用Vue.Draggable 组件。我像这样将它添加到页面中：

<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

由于我没有使用 webpack，我该如何使用这个组件？

【问题讨论】：

您能解释一下到目前为止您是如何尝试使用它的吗？无论有没有 webpack，你使用它的方式都应该是一样的。

标签： vuejs2 vue-component vuedraggable

【解决方案1】：

我通过从窗口对象访问 vuedraggable 解决了我的问题，并将其添加到组件选项中，如下所示：

var vm = new Vue({
    el: '#app',
  components: {
    'sv-lead-column': svLeadColumn,
    'sv-customer-column': svCustomerColumn,
    draggable: window['vuedraggable']
  },
  ...
})

【讨论】：

谢谢！社区已经将我们这些新手排除在外，他们的“使用步骤”将许多事情视为理所当然。我想尝试做一个非常简单的应用程序/网络，没有数千个依赖文件和一堆构建器（vue cli、webpack、npm、yarn、minifiers ...）和一个节点服务器。 :((