在vue应用中注册导入的组件

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
}