vue3 自動批量注冊公共元件

自動批量注冊元件

思路分析

• 使用

  require

  提供的函數

  context

  加載某一個目錄下的所有

  .vue

  字尾的檔案。
• 然後

  context

  函數會傳回一個導入函數

  importFn

  • 它有一個屬性

    keys()

    擷取所有的檔案路徑
• 通過檔案路徑數組，通過周遊數組，再使用

  importFn

  根據路徑導入元件對象
• 周遊的同時進行全局注冊即可

具體代碼

// 其實就是vue插件，擴充vue功能，全局元件、指令、函數 （vue.30取消過濾器）
// 當你在mian.js導入，使用Vue.use()  (vue3.0 app)的時候就會執行install函數
// 導入library檔案夾下的所有元件
// 批量導入需要使用一個函數 require.context(dir,deep,matching)
// 參數：1. 目錄  2. 是否加載子目錄  3. 加載的正則比對
//比對目前檔案夾下的所有.vue檔案 注冊全局元件
const importFn = require.context('./', false, /\.vue$/)
// console.dir(importFn.keys()) 檔案名稱數組
export default {
  install (app) {
    // 批量注冊全局元件
    importFn.keys().forEach(key => {
      // 導入元件
      const component = importFn(key).default
      // 注冊元件
      app.component(component.name, component)
    })
  }
}
           

在main.js中插入元件

// 引入自定義的ui元件庫
import XtxUI from '@/components/library/index.js'
createApp(App)
  .use(store)
  .use(router)
  .use(XtxUI)
  .mount('#app')