在vite中怎麼批量註冊組件

1. 在webpack中使用require來獲取組件

/ 參數: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中使用
import allComponent from '@/components/library/index.js'
createApp(App)
  .use(store)
  .use(router)
  .use(allComponent)
  .mount('#app')

2. 在vite中使用 import.meta.glob

const app = createApp(App);

// 批量註冊全局組件
const components = import.meta.glob('./components/uiSchema/itemComponents/*.vue')
for (const [key, value] of Object.entries(components)) {
     const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
     console.log('當前組件時',name);
     app.component(name, defineAsyncComponent(value))
}

 

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章