Vue整体注册组件

132 阅读1分钟

1、建一个components文件夹,如下:

1639054574(1).jpg

2、在components文件夹中建一个index.js文件,代码如下:

import Vue from 'vue'
//  使用的是webpack require.context(路径【表示公共的组件的目录】,文件深入循环查找【bool】,正则【最终要使用的组件】 )
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)
})

3、在main.js中引入

import '@/components'

4、组件中直接用