你是否有這樣的煩惱，在vue中寫了很多自己的組件，不論是基礎(chǔ)組件還是業(yè)務(wù)組件，想在其他組件中引用，就必須要import的方式引進(jìn)來，例如

// 引入
import ImageBotton from './Image-botton.vue'
export default {
  component: {
    ImageBotton
  }
}

// 使用

<Image-botton><Image-botton/>

一個兩個還好，項目大了就會麻煩起來了，而且需要修改的話，也需要每個里面都去對應(yīng)一遍?，F(xiàn)在這個時代，時間就是金錢，開發(fā)效率是第一位，有些工作就不需要重復(fù)無意義的進(jìn)行。
那么組件的全局注冊就體現(xiàn)出來他的優(yōu)勢了。

const requireComponent = require.context(
  // 其組件目錄的相對路徑
  '@/components/',
  // 是否查詢其子目錄
  true,
  // 匹配基礎(chǔ)組件文件名的正則表達(dá)式
  /\.(vue|js)$/
);
requireComponent.keys().forEach(fileName => {
  // 獲取組件配置
  const componentConfig = requireComponent(fileName);
  // 獲取組件的命名(可以根據(jù)自己項目的實際情況進(jìn)行修改)
  const componentName = fileName.replace(/^\.\//, '').replace(/\/\index.vue$/, '');
  // 全局注冊組件
  Vue.component(
    componentName,
    // 如果這個組件選項是通過 `export default` 導(dǎo)出的，
    // 那么就會優(yōu)先使用 `.default`，否則回退到使用模塊的根。
    componentConfig.default || componentConfig
  );
});

// 引入：無需引入
// 使用：直接在頁面中使用
<Image-botton><Image-botton/>

注意：組件的全局自動注冊的方法一定要在new Vue之前進(jìn)行

這里是前端掃地僧，和你一起分享前端的那些事。