Vue自动注册全局组件

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

我们在开发的过程中，都会去封装比较常用的全局组件，但是封装完了我们还要手动引入。

👴感觉这很不高级，也不够优雅

那么,让我们搞一个可以自动注册全局组件的方法吧😁

将components下的组件注册到全局

🚀实现方法

我们先在components目录下新建一个index.js文件

我们将在这个文件里面操作直接暴露出去👇

export default {
  install(Vue) {
    /* require.context(‘文件路径’，深层查找（Boolean），匹配的文件后缀)  
    [这是webpack提供的方法] */
    const requireComponent = require.context('./', true, /\.vue$/)
    console.log(requireComponent)
  }
}

log不出来我们用dir👇

里面有一些属性方法，我们用调用keys能拿到正则过滤后组件的路径👇

export default {
  install(Vue) {
    const requireComponent = require.context('./', true, /\.vue$/)
    console.dir(requireComponent.keys())
  }
}

是数组，利用forEach()遍历，拿到每一项👇

export default {
  install(Vue) {
    const requireComponent = require.context('./', true, /\.vue$/)

    requireComponent.keys().forEach((item) => {
      console.log(item)
    })
  }
}

我们的这个requireComponent是个函数不知道你们注意到没有，还可以传参进去👇

export default {
  install(Vue) {
    const requireComponent = require.context('./', true, /\.vue$/)
    requireComponent.keys().forEach((item) => {
      console.log(requireComponent(item))
    })
  }
}

我们拿到了组件暴露出来的对象， 收集它👇

export default {
  install(Vue) {
    const requireComponent = require.context('./', true, /\.vue$/)
    requireComponent.keys().forEach((item) => {
      const moduleDefault = requireComponent(item).default
      console.log(moduleDefault)
    })
  }
}

最后利用Vue.component() 注册👇

export default {
  install(Vue) { 
  /* require.context(‘文件路径’，深层查找（Boolean），匹配的文件后缀)  [这是webpack提供的方法] */
    var requireComponent = require.context('./', true, /\.vue$/)
    requireComponent.keys().forEach((item) => {
      var moduleDefault = requireComponent(item).default
      Vue.component(moduleDefault.name, moduleDefault)
    })
  }
}

再在main.js文件里面引入👇

// 自动注册全局组件
import plugin from '@/components/index'
Vue.use(plugin)

注意：这里面的每个自动导入的组件都是要有name的