最近博主在寫大型vue項目的時候，發現有很多地方需要用到重復的組件，但又不想頻繁的import再注冊
所以就把組件定義為全局組件，但是隨着組件數量的越來越多，每寫一個組件就要加一個全局注冊方法，真的很麻煩！
所以這里寫一遍博客專門來記錄vue是如何批量導入組件並注冊的：
步驟：
-
使用 require 提供的函數 context 加載某一個目錄下的所有 .vue 后綴的文件。
-
然后 context 函數會返回一個導入函數 importFn
-
它又一個屬性 keys() 獲取所有的文件路徑
-
通過文件路徑數組，通過遍歷數組，再使用 importFn 根據路徑導入組件對象
遍歷的同時進行全局注冊即可
看的是不是有點懵，下面寫的具體一點（以vue-cli為例）：
1.首先在項目的components下新建一個文件夾library，然后再library下新建index.js文件
index.js是我們注冊的入口文件，下面的vue文件就是我們准備注冊的全局組件，按照以往的寫法：
import XtxSkeleton from './XtxSkeleton.vue'
import ... from ...
....
export default {
install (app) {
app.component(XtxSkeleton.name, XtxSkeleton)
app.component(XtxMore.name, XtxMore)
app.component(XtxBread.name, XtxBread)
app.component(XtxBreadItem.name, XtxBreadItem)
...
...
(每寫一個組件就要再這里全局注冊一下)
}
}
然后再項目的main.js中引入入口文件，並用use方法使用
import UI from './src/components/library'
Vue.use(UI)
之后就可以再全局直接使用組件而不用導入再注冊！
批量導入
首先介紹一些require.context方法：
可以看一下官方文檔：https://www.npmjs.com/package/require-context
我這里簡單介紹一下：
require.context(directory, useSubdirectories = false, regExp = /^\.\//)
一共接收三個參數：1.傳入搜索的目錄 2.一個Boolean值，表示是否加載子目錄 3.一個正則表達式
返回值：一個函數，有一個keys屬性，這個屬性為一個函數，返回值為匹配到的路徑數組
這里是不是還是有點懵，下面來改造一個上面的代碼：
const importFn = require.context('./', false, /\.vue$/)
export default {
install (app) {
importFn.keys().forEach(path => {
const component = importFn(path).default
app.component(component.name, component)
})
}
}
哇，突然代碼少了很多，怎么做到的，下面來分析一下：
const importFn = require.context('./', false, /\.vue$/)
這段代碼表示匹配./路徑下，以vue結尾的文件，並且不加載子目錄
然后我們打印一下importFn.keys()
看，它是一個數組，里面都是匹配到的路徑，然后遍歷這個數組
importFn函數接受一個路徑，可以讀取該路徑組件的信息（別忘了后面有個.default）,
最后使用app.component方法注冊組件！！！
是不是很好用！以后在這個路徑下寫的所有vue文件都相當於全局注冊了組件，哪里都可以用！
注意
1.注冊組件需要用到.name屬性，所以每一個需要全局注冊的組件，都需要有name屬性！
2.本示例中的app是vue3.0的寫法，2.0請用vue（其實是一樣的）