一、注册单个组件

1.在main.js中挂载完组件的index.js文件后再到index.js中注册组件即可，而index.js中默认导出部分就挂载到了vue中，实现了全局注册的效果（不过这种方法不够智能，每添加或删除组件时就必须再进入index.js中增加或删除注册组件） components/index.js

写到这，就可以看出这种逐个引入组件的弊端了，所以下面介绍一种批量注册的方法

console.log(SvgIcon),效果图如下

二、批量注册组件

在组件文件夹下，要将这三个组件批量注册还是放在components文件夹下创建index.js

再创建好的index.js中批量注册组件即可，代码如下

export default{
install(Vue){ 
   // require.context('文件路径'，深层次查找，匹配的文件后缀)  =====这是webpack提供的方法
var requireComponent = require.context('./',true,/\.vue$/)

   // console.dir(requireComponent.keys())打印一下，是一个数组，数组如下图，是三个路径，和导入的文件数量一致
   requireComponent.keys().forEach((item)=>{
   //console.dir(requireComponent)打印一下，是一个对象，对象需要传一个参数，参数为刚刚打印出的路径
   var moduleDefault= requireComponent(item).default
   console.log(moduleDefault,88)
   Vue.component(moduleDefault.name,moduleDefault)
   })
}}

console.dir(requireComponent.keys()),打印效果图（图片有点小，可自行缩放）

console.dir(requireComponent) 打印效果图

console.dir(requireComponent(item)) 效果图如下

展开SvgIcon项

和上面打印console.log(SvgIcon)的效果一致，故批量注册就成功了！

全局批量注册组件

一、注册单个组件

二、批量注册组件