VUE批量引用组件，自动引入指定目录下所有组件

单独引用多个组件写法：

// import ComponentA from './charts/ComponentA'
// import ComponentB from './charts/ComponentB'
// import ComponentC from './charts/ComponentC'
// import ComponentD from './charts/ComponentD'
// import ComponentE from './charts/ComponentE'


 // components: {
  //   ComponentA, ComponentB, ComponentC, ComponentD, ComponentE
  // },
复制代码

自动引入指定目录下的所有组件

//指定组件目录
const requireComponent = require.context('./charts', false, /\w+.(vue|js)$/)

const cmps = {}
// 如果目录下有需要单独引入的如chart1 组件排除，单独引入
const filterCmps = ['./chart1.vue']

requireComponent.keys().forEach(fileName => {
  const cmp = requireComponent(fileName).default
  !filterCmps.includes(fileName) && (cmps[cmp.name] = cmp)
})




  components: {
    createHeader: () => import('./charts/chart1'),
    ...cmps
  },