TabBar proceso de desarrollo de componentes registros de errores

1. Componentes de importación y exportación de nombres

El archivo de proyecto se estructura de la siguiente

código App.vue es el siguiente

<template>
  <div id="app">
    <tab-bar>
      <tab-bar-item> </tab-bar-item>
      <!--中间代码省略-->
    </tab-bar>   
  </div>
</template>

<script>
import TabBar from "./components/tabbar/TabBar"
import TabBarItem from "./components/tabbar/TabBarItem"

export default {
  name: 'App',
  components: {
    TabBar,
    TabBarItem
  }
}
</script>

<style>
  @import './assets/css/base.css';  
</style>

• Y los componentes de importación de los nombres de las variables registradas para ser consistente
• componentes de registro (ES6 objetos redacción)

components: {
    TabBar,
    TabBarItem
  }

El siguiente es el texto de la anterior

components: {
    'Tabbar':TabBar,
    'TabBarItem':TabBarItem
  }

Que esto es TabBar nombre del componente y TabBarItem, su contenido es asignado por la importación de dos variables, en uso, el componente de etiqueta llama TabBar

• Componente de nombre
  de registro de nombres para 'TabBar'
  su uso como <tab-bar>o<TabBar>

propiedad de nombre 2. Componente de exportación

export default {
  name: "app",
  props: {
    path: String
  },
  data(){
    return{
      isActive: true
    }
  },
  methods: {
    itemClick(){
      this.$router.replace(this.path)
    }
  }
}

El atributo de nombre no debe ser confundido ah, componentes recursivas utilizados (no en contacto), así como en el router vue posterior se refiere a un componente (tal como un I keep-alive escribí el uso artículo)

3. vue 报错: Desconocido elemento personalizado: enrutador vista - ¿Te has registrado correctamente el componente

Enrutamiento router.js de archivos

import Vue from 'vue'
import VueRouter from 'vue-router'

const Profile = () => import ('../views/profile/profile.vue')

Vue.use(VueRouter)

//a.定义路由
const routes = [
{
    path: '/profile',
    component: Profile
}
]
//b.创建router实例，并传入routes路由配置
const router = new VueRouter({
    routes
})

export default router

a y b son nombrados regular, definida como los requisitos oficiales rutas de enrutamiento, la ruta de ejemplo enrutador
de modo que cuando la configuración de enrutamiento de entrada

const router = new VueRouter({
    routes //相当于routes：routes
})

, A continuación, la ruta se define utilizando esta variable se debe escribir rutas de escritura

Cuando main.js registradas instancia de enrutamiento

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //相当于router：router
  render: h => h(App)
})

Así que cuando la importación, seguido enrutador (imprescindible), se monta ejemplo Vue enrutador