vue.js组件引用

Question

正在学习vue.js的组件，但是这么引用为什么不性呢

---

而app.vue却能直接引用

=======

<template>

  <div class="hello">
      <indexbanner></indexbanner>
    </div>
  </template>

  <script>
  import indexbanner from '../../components/tpl/banner'
    export default {
      name: 'hello',
      components: {
        indexbanner
      },
      data () {
        return {
        
     },

     methods:{
       
     }
   }
 </script>


 <style scoped>
 
</style>

=======

banner.vue

<template>

  <div class="banner">
    <h1>this is banner</h1>
  </div>
</template>

<script>

export default {
  name: 'banner',
  component: {

  },
  data () {
    return {
    
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

---

mian.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import '../src/js/public.js'
Vue.config.productionTip = false

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

Answer 1

没问题啊，你确定这的代码跟github上是一套东西？
你的github上的banner.vue可是空的，我把题目里贴的粘进去是没报错的。

Answer 2

你的 indexbanner.vue 有问题，没贴出来

Answer 3

检查下 banner.vue 的 mount

Answer 4

HelloWorld.vue

components: {
'index-banner': indexbanner
}

<index-banner></index-banner>

Answer 5

贴一下main.js 猜测是vue里用了template属性