在vue app

Question

我正在尝试在我的Vue CLI webpack应用中使用NPM包vue-simple-spinner，但我收到错误：

Unknown custom element: <vue-simple-spinner> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

文档说：

所以我将其包含在我的main.js文件中，如下所示：

import Vue from 'vue'
import App from './App'
import router from './router'
import Spinner from 'vue-simple-spinner'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false
Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
    App,
    Spinner
  },
  template: '<App/>'
})

然后文件说：

我已经包含了<vue-simple-spinner></view-simple-spinner>标签，但我不确定在何处/如何包含js脚本。我已经尝试将它们包含在模板中（提供错误）并尝试使用import Spinner from 'vue-simple-spinner导入组件，但两次尝试仍然给我Unknown custom element错误。

如何包含脚本和/或正确注册组件？

这是我完整的Vue.app文件：

<template>
  <div id="app" class="container">
    <div>
      <h1>Market Price Spreads</h1>
      <button type="button" class="btn btn-primary" v-on:click="loadMarkets()">Refresh Markets</button>
      <vue-simple-spinner></vue-simple-spinner>
    </div>
    <div class="main-table">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Market</th>
            <th>Poloniex</th>
            <th>Bittrex</th>
            <th>Spread</th>
          </tr>
        </thead>
          <tbody>
            <tr v-for="market in markets">
              <td>{{ market[0] }}</td>
              <td>{{ market[1] | round(6) }}</td>
              <td>{{ market[2] | round(6)}}</td>
              <td>{{ market[3] | round(2)}} %</td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>

</template>

<script>
  /* eslint-disable */

  import loadDataMixin from './components/mixins/loadDataMixin'

  export default {
    name: 'App',
    mixins: [loadDataMixin],
    filters: {
      round: function(number, places) {
        return number.toFixed(places)
      }
    },
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin-top: 60px;
  }
  
  .main-table {
    margin-top: 20px;
  }
</style>

Answer 1

components: {
  Spinner
}

是

的简写

components: {
  Spinner: Spinner
}

表示您的组件将注册为<spinner>。尝试：

components: {
  'vue-simple-spinner': Spinner
}