vue js 使用 npm 模块作为内联脚本答案

【问题标题】：vue js use npm module as inline scriptvue js 使用 npm 模块作为内联脚本
【发布时间】：2018-06-04 11:20:15
【问题描述】：

我没有使用 webpack，我将 vue 作为外部脚本包含在内像这样：

<script src ="unpckg.com/vue.js-latest"></script>

我想使用 npm 模块

https://github.com/stephan281094/vue-drag-select

所以我像这样包含它：

<script src= "https://unpkg.com/vue-drag-select@0.1.5/dist/vue-drag-select.js
"></script>

如何使用它？

UPD：我更正了外部脚本的路径。

我的问题是如何在我的应用程序中包含 vue-drag-select 组件，因为当我写

import DragSelect from 'vue-drag-select/src/DragSelect.vue'

它给我一个错误因为我没有使用webpack，所以没有导入功能

【问题讨论】：

可以使用jsdelivr jsdelivr.com/package/npm/vue-drag-select<script src="https://cdn.jsdelivr.net/npm/vue-drag-select@0.1.5/dist/vue-drag-select.min.js"></script>
@ittus 查看更新..

标签： vue.js

【解决方案1】：

这只是一个 url https://github.com/stephan281094/vue-drag-select 用于显示包详细信息而不是任何文件路径

这里是.js 文件的原始数据，你可能想要包含，去这个 url 并将这个文件的内容保存在你的本地，然后导入/包含

https://github.com/stephan281094/vue-drag-select/blob/master/dist/vue-drag-select.js

【讨论】：

查看更新。我了解如何包含来自 npm 或 src 的文件的本地文件。我不能使用 import / include 因为我没有使用 webpack

【解决方案2】：

如果包含cdn脚本，那么DragSelect是全局变量，可以直接访问

Vue.component('vue-drag-select', DragSelect.default)

Vue.component('vue-drag-select', DragSelect.default)
new Vue({
  el: "#app1",
  methods: {
    getClasses (item, selectedItems) {
      const isActive = !!(selectedItems.find((selectedItem) => {
        return parseInt(selectedItem.dataset.item, 10) === item
      }))
      return {
        item: true,
        active: isActive
      }
    }
  }
})

*,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  html {
    box-sizing: border-box;
    user-select: none;
  }
  html,
  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }
  body {
    font: 16px / 1.5 'Helvetica Neue', sans-serif;
    padding: 5%;
  }
  /* Custom styling */
  .item {
    display: inline-flex;
    min-width: 80px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #ddd;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 10px;
  }
  .item.active {
    background-color: rgb(0, 162, 255);
    color: #fff;
  }

<script src="https://unpkg.com/vue-drag-select@0.1.5/dist/vue-drag-select.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


  <div id="app1">
    <h1>Vue Drag Select Example</h1>
      <vue-drag-select selector-class="item">
        <template slot-scope="{ selectedItems }">
          <div
            v-for="item in 50"
            :class="getClasses(item, selectedItems)"
            :data-item="item"
          >
            Item {{ item }}
          </div>
        </template>
      </vue-drag-select>
  </div>

【讨论】：