Vue 组件批量注册

Vue应用有时候组件多了，一个一个注册引用很麻烦，其实可以把组件文件夹批量注册，然后按需引用。
首先在组件文件夹里创建一个 index.js 的文件，里面写扫描此路径下所有组件的逻辑：

//扫描此文件夹下的所有的`.vue` 文件，并注册
const componentsWatcher = scanner => {
  scanner.keys().map(key => {
    let name = scanner(key).default.name
    if (name) {
      Vue.component(name, function(resolve) {
        require([key + ''], resolve)
      })
    }
  })
}
//扫描匹配条件
const vueScanner = require.context(
  '@/components',
  true,
  /^\.\/((?!\/)[\s\S])+\/index\.vue$/
)

//扫描
componentsWatcher(vueScanner)

image.png

在把 components 文件夹引入到main.js 里

(() => {
  Promise.all([
    import('@/components'),
    import('./App.vue'),
    import('./router'),
    import('./store')
  ]).then(([{ default: App }, { default: router }, { default: store }]) => {
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    })
  })
})()

这样只要把组件放在components文件夹下面，不需要注册，调用的地方按需引用直接调用即可：

import { myComponent } from '@/components'