一、定义2个组件

scr/components/ComponentsA/index.vue

<template>
  <div>A组件</div>
</template>
<script>
export default {
  name: 'ComponentA'
}
</script>

scr/components/ComponentsB/BBB/BBBB/index.vue

<template>
  <div>B组件</div>
</template>
<script>
export default {
  name: 'ComponentB'
}
</script>

二、局部使用这两个组件

<template>
  <div id="app">
    <ComponentA />
    <ComponentB />
  </div>
</template>
<script>
import ComponentA from '@/components/ComponentA'
import ComponentB from '@/components/ComponentB/BBB/BBBB'
export default {
  components: { ComponentA, ComponentB }
}
</script>

三、全局注册组件

如果这2个组件是基础性的组件，项目中好多地方都要用到，可以注册成全局组件

src/requireAllComponents.js

import Vue from 'vue'

const componentsContext = require.context('@/components', true, /index.vue$/) // true表示递归查找 正则匹配index.vue文件

componentsContext.keys().forEach(item => {
  const componentConfig = componentsContext(item).default
  if(componentConfig.name) {
    Vue.component(componentConfig.name, componentConfig) // 全局注册组件
  }
})

main.js

import './requireAllComponents'

此时，便不再需要在每个组件中都引入这种基础组件了