vux中把Tabbar单独放一个components中按需调用，但只能在app.vue中全局调用，组件间调用就会报错？

Question

用Vux和Vue-cli做的项目，因为项目中只有其中几个页面用到Tabbar并不是所有的页面都用到，所以想将Tabbar封起来需要的地方调用一下就好，但是发现，全局在app.vue是可以调的，在页面的Vue文件里调用就会报错，是需要配置什么还是我的方法有误，求指点。

以下是tabbar文件里的内容

<template>
    <div>
        <tabbar>
            <tabbar-item link="/home" selected>
                <i slot="icon" class="icon"></i>
                <span slot="label">首页</span>
            </tabbar-item>
            <tabbar-item link="/launch">
                <i slot="icon" class="icon"></i>
                <span slot="label">发起</span>
            </tabbar-item>
            <tabbar-item link="/user">
                <i slot="icon" class="icon"></i>
                <span slot="label">个人</span>
            </tabbar-item>
      </tabbar>
    </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'

export default {
    components: {
        Tabbar,
        TabbarItem
  }
}
</script>

以下是app.vue里的调用

<template>
  <div id="app">
    <router-view></router-view>

    <!-- footer -->
    <x-tabbar></x-tabbar>
  </div>
</template>

<script>
import xTabbar from './components/tabbar'
export default {
  name: 'app',
  components: {
    xTabbar
  }
}
</script>

如果在home.vue里面调用就会报错

<template>
<div id="home">
  <div class="">
    这是首页
  </div>
  <router-view></router-view>

  <!-- footer -->
  <x-tabbar></x-tabbar>
</div>
</template>

<script >
import xTabbar from './src/components/tabbar'
export default {
  name: 'home',
  components: {
    xTabbar
  }
}
</script>

报错This relative module was not found内容如下：

main.js里面的内容如下

import Vue from 'vue'
import FastClick from 'fastclick'
import VueRouter from 'vue-router'
import App from './App'
import { AlertPlugin, ToastPlugin, AjaxPlugin } from 'vux'
import Routers from './router/router'

Vue.use(VueRouter)
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)
Vue.use(AjaxPlugin)

Vue.prototype.$http.defaults.baseURL = 'https://easy-mock.com/mock/59dc27d71de3d46fa94c82ae/example'

const RouterConfig = {
  mode: 'history',
  routes: Routers
}

const router = new VueRouter(RouterConfig)

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app-box')

Answer 1

在入口文件main.js注册；

Vue.component('xTabbar', xTabbar)