论如何自动注册全局组件_AI_huihui的博客

在components中创建lib文件夹

index.js：

export default {
  // 通过Vue.use调用相应的方法对象，调用它的install方法
  install(Vue, options) {
    // 自动全局注册组件
    // 1.读取lib文件夹下的文件
    // const req=require.context('路径','是否读取子文件夹','正则匹配')
    const req = require.context('./', true, /\.vue$/)
    // req 是一个function函数(传入读取文件路径后可导入该文件)
    // 该函数有一个keys()该方法能返回所有读取的文件的路径
    // 2.拿到读取文件的路径
    // 3.导入处理
    req.keys().forEach((item) => {
      // console.log(req(item).default)
      // req(item).default可以理解为导入了该路径文件
      const com = req(item).default
      // 全局注册
      Vue.component(com.name, com) // 第一个参数:组件名称,第二个参数:要注册的组件
    })
    // console.log(req.keys(), 'keys')
    // console.log(options, 'options')
  }
}

在main.js引入

import libJs from '@/components/lib/index'
Vue.use(libJs, '全局注册')

lib下的公共组件 

export default {
    // 必须拥有name名
    name: "HelloWorld",
}

 然后就可以直接使用啦

<template>
    <HelloWorld />
</template>