vue批量导入全局组件

使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。

然后 context 函数会返回一个导入函数 importFn

它有一个属性 keys() 获取所有的文件路径

通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象

遍历的同时进行全局注册即可

index.js

//之前的导入写法
// import B2cSkeleton from './b2c-skeleton' 
// import B2cCarousel from './b2c-carousel' 
// import B2cMore from './b2c-more' 
// import B2cBread from './b2c-bread' 
// import B2cBreadItem from './b2c-bread-item' 
//批量导入写法
// 导入library文件夹下的所有组件
// 批量导入需要使用一个函数 require.context(目录,是否加载子目录,加载的正则匹配)
//   ./表示当前目录，不加载子目录，找到以vue结尾的
const importFn = require.context('./', false, /\.vue$/)// importFn已经装着所有符合条件的组件
export default {
  install (app) {
    //之前的注册写法
    // app.component(B2cSkeleton.name, B2cSkeleton) 
    // app.component(B2cCarousel.name, B2cCarousel) 
    // app.component(B2cMore.name, B2cMore)  
    // app.component(B2cBread.name, B2cBread)  
    // app.component(B2cBreadItem.name, B2cBreadItem)  

    
    // 批量注册全局组件
    // importFn.keys() //装着组件地址的数组
    importFn.keys().forEach(path => { //遍历这个数组
      // 默认导入组件
      const component = importFn(path).default
      // 注册组件
      app.component(component.name, component)
    })

  }
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import UI from './components/library'// 引入全局用的插件
// 插件的使用，在main.js使用app.use(插件)
createApp(App).use(store).use(router).use(UI).mount('#app')

vue批量导入全局组件

猜你喜欢