Fork me on GitHub

在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))
}

 

 
posted @ 2022-09-15 10:09  欢欢11  阅读(396)  评论(0编辑  收藏  举报