不使用npm时如何加载外部Vue组件

Question

当我不使用npm时如何加载外部Vue组件？我收到此错误消息：

  

ReferenceError：未定义VueButtonSpinner

  Vue.use(VueButtonSpinner);
  var vm = new Vue({
      delimiters: ['[[', ']]'],
      el: '#test',
      data: {
        isLoading: false,
        status: ''
      },
      components: {
        VueButtonSpinner
      },
      methods: {
      	send() {
        console.log("ypyoyoyoy");
        this.isLoading = true;
        }
      },
  });

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

<script src="https://unpkg.com/vue-button-spinner@2.2.0/dist/vue-button-spinner.js"></script>

<div id="test">
<button-spinner
     @click="send"
    :isLoading="isLoading" 
    :disabled="isLoading"
    :status="status">
    <span>Submit</span>
</button-spinner>
</div>

Answer 1

这应该有效。诀窍是脚本已导入，但代码默认为default内的window['vue-button-spinner']属性：

Vue.component('button-spinner', window['vue-button-spinner'].default);

var vx = new Vue({
  // delimiters: ['[[', ']]'],
  el: '#test',
  data() {
    return {
      isLoading: false,
      status: ''
    };
  },
  methods: {
    send() {
      console.log("ypyoyoyoy");
      this.isLoading = true;
    }
  },
});

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

<script src="https://unpkg.com/vue-button-spinner@2.2.0/dist/vue-button-spinner.js"></script>

<div id="test">
  <button-spinner
       @click.native="send"
      :is-loading="isLoading" 
      :disabled="isLoading"
      :status="status">
      <span>Submit</span>
  </button-spinner>
</div>

Answer 2

您可以使用模块加载器系统，因此请在<script type="module" src="whatever.js"></script>中使用import和whatever.js：

来自MDN <script>

  

模块：HTML5对于兼容HTML5的浏览器，该代码被视为   JavaScript模块。脚本内容的处理不是   受charset和defer属性的影响。有关使用的信息   模块，请参阅《深度：模块》中的ES6。代码在以下情况下可能会有所不同   使用module关键字。

whatever.js

import Vue from "https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js";

import {
  VueButtonSpinner
} from "https://unpkg.com/vue-button-spinner@2.2.0/dist/vue-button-spinner.js";

const app = new Vue({
  el: "#app",
  components: {
    "button-spinner": VueButtonSpinner
  }
});