【Vue自动全局注册组件】基础组件的自动化全局注册

通常我们在写vue项目时会产生很多的组件，一个两个还好，如果组件多了，那么就需要不停的注册。非常的繁琐和耗费时间，那么该如何一次部署，永久解决手动注册呢？
那这边官方其实也是给出了具体的方案的，恰好今天有空，我们一起学习一下吧~

基础组件的自动化全局注册

首先我们需要选定一个存放组件的文件夹，一般来说以脚手架中自动生成的 components 文件夹为主。选好组件文件夹后我们需要
在文件夹中创建一个js文件，可以取名为index.js，如下图所示：

	在index文件中，我们引入官方给出的自动注册代码：

.

	为了大家好复制，这边把代码直接贴出来：
	
			import Vue from 'vue'
			const requireComponent = require.context(
			    // 其组件目录的相对路径 根据本文件所在的文件位置选定
			    './',
			    // 是否查询其子目录
			    true,
			    // 匹配基础组件文件名的正则表达式 这边只匹配了vue后缀的文件，大家可以根据自己的需求来自定义正则表达式
			    /\.vue$/
			)
			requireComponent.keys().forEach(fileName => {
			    // 获取组件配置
			    const componentConfig = requireComponent(fileName)
			    console.log(componentConfig); //这边获取到组件的具体信息
			    // 全局注册组件
			    Vue.component(
			        componentConfig.default.name,
			        // 如果这个组件选项是通过 `export default` 导出的，
			        // 那么就会优先使用 `.default`，
			        // 否则回退到使用模块的根。
			        componentConfig.default
			    )
			})
	最后，我们只需要在main.js中来导入该文件，就可以实现全局自动注册组件啦~

.

	代码如下：
		import Vue from 'vue'
		import App from './App.vue'
		
		import './components/index'  //根据官方提示 该全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
		Vue.config.productionTip = false
		
		
		new Vue({ //没错就是在他前面
		  render: h => h(App),
		}).$mount('#app')
		
		结束，这样就可以在需要的地方直接使用啦。

注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。
说人话就是，全局注册识别的是被注册组件定义的name属性，而不是组件的文件名。所以组件中的name属性必须要写，最好name属性和文件名保持一致，避免不必要的问题产生。而局部注册组件，则是以导入时的名称为主，与组件里的name可以不一致。