vux中把Tabbar單獨放一個components中按需調用，但只能在app.vue中全局調用，組件間調用就會報錯？

用Vux和Vue-cli做的項目，因為項目中只有其中幾個頁面用到Tabbar并不是所有的頁面都用到，所以想將Tabbar封起來需要的地方調用一下就好，但是發(fā)現(xiàn)，全局在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">發(fā)起</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')