vue3 - 批量注冊元件

目的： 自動的批量注冊元件。

大緻步驟：

• 使用 require 提供的函數 context 加載某一個目錄下的所有 .vue 字尾的檔案。
• 然後 context 函數會傳回一個導入函數 importFn
• 它又一個屬性 keys() 擷取所有的檔案路徑 通過檔案路徑數組，
• 通過周遊數組，再使用 importFn 根據路徑導入元件對象
• 周遊的同時進行全局注冊即可

手動注冊元件

批量注冊元件

// 導入library檔案夾下的所有元件
// 批量導入需要使用一個函數 require.context(dir,deep,matching)
// 參數：1. 目錄  2. 是否加載子目錄  3. 加載的正則比對
const importFn = require.context('./', false, /\.vue$/)
// 比對到的檔案名數組
// console.log('檢視比對到的檔案名數組', importFn.keys()) 
export default {
  install (app) {
  	// 批量注冊全局元件
    // 周遊檔案名數組
    importFn.keys().forEach(item => {
      // 導入函數根據檔案名，導入檔案内容
      const component = importFn(item).default
      // console.log(component)
      // 根據導入的元件檔案，實作自動全局注冊
      app.component(component.name, component)
    })
  }
}
           

總結：

require.context() 是webpack提供的一個自動導入的API
參數1：加載的檔案目錄
參數2：是否加載子目錄
參數3：正則，比對檔案
傳回值：導入函數 fn
keys() 擷取讀取到的所有檔案清單