1、在components文件夹中建一个index.js文件

src/components/index.js中代码如下：

import Vue from 'vue'

// require.context()
// 三个参数如下：
// 要所搜的文件夹目录，
// 是否还应该搜索它的子目录
// 正泽表达式
const requireAll = context => context.keys().map(context)
const req = require.context('./', true, /\.vue$/)
// console.dir(req)
// console.dir(req.keys())

// 第一种写法
const n = req.keys().map(item => req(item))
    // console.log(n)
    n.forEach(item => {
    // console.log(item)
    Vue.component(item.default.name, item.default)
})

// 第二种写法
requireAll(req).forEach(item => {
 Vue.component(item.default.name, item.default)
})

2、在main.js中的代码如下：

import '@/components/index.js'

3、也可以做成组件，方法如下

注意：如果是导入对象，必须用install方法，如果是函数，可以任意命名

src/components/index.js中代码如下：

// 方法1：做成函数
function abc (Vue) {
  requireAll(req).forEach(item => {
    Vue.component(item.default.name, item.default)
  })
}
export default abc

// 方法2：做成对象
const components = {
  install () {
    requireAll(req).forEach(item => {
      // item 也可以解构
      const { default: defaults, default: { name } } = item
      Vue.component(name, defaults)
    })
  }
}
export default components

main.js中的代码如下：

import components from '@/components'
Vue.use(components)