vue实现整体注册组件

130 阅读1分钟

公共组件components,新建index.js

webpack require.context( 路径【表示公共组件的目录】,文件深入循环插找【bool】,正则【最终要使用的组件】)

import Vue from 'vue'
const requireComponent = require.context('./', true, /.vue$/)
console.log(requireComponent.keys(), 3344222)
requireComponent.keys().forEach((item) => {
  // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
  /* 获取的是 每一个组件暴露出来的对象 */
  const defaultObj = requireComponent(item).default
  Vue.component(defaultObj.name, defaultObj)
})
最后main.js中导入
// 整体注册全局组件
import '@/components'
使用组件地方,可直接使用,无需引入(隐式引入)

image.png image.png

image.png