Vue手动注册全局公共组件和批量注册公共组件的方法

利用Vue.use手动注册

//在main.js中引入自己的公共组件
import PageTools from '@components/PageTools'
export default{
install(Vue)
Vue.componet("PageTools"，PageTools)
}

// 他的实现原理是：
// 第一步：需要传入一个参数，这个参数可以是对象||函数
// 第二步：对象中提供了一个install函数，
// install函数有一个参数接收的是Vue

在上面已经注册好了，记得挂载到Vue原型上，最后你就可以开心的全局使用你的组件啦。

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

批量注册

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

// require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API 
// 参数1:加载的文件目录 文件路径 
// 参数2:是否加载子目录 是否深层次查找 
// 参数3:：正则，匹配文件 
// requireComponent:返回值：导入函数 fn 
// keys() 获取读取到的所有文件列表

最后批量注册完，每个组件的name上别忘了写上组件名，不然就会你就会见到下面的报错信息了。

如果出现这种报错，那就说明的你的组件name名字没有写完整，可以去检查组件名name的名字是否忘记写了。

每天进步一点点，前端入门到入土