vue开发技巧——批量注册全局组件

vue 批量注册全局组件

日常在开发中我们常常会遇到，在公共组件中多次引入的问题。如某个组件使用频次在两次以上，建议注册为全局组件，以便后续开发便捷使用，防止在父组件中无休止的引入、注册带来的不便：

//引入vue
import Vue from 'vue'
//引入全局组件
import componentName from ‘@/component/component’
//注册为vue全局组件
Vue.component('componentName',componentName)

而往往我们需要注册为全局的组件，不只一个，有可能是十几个甚至更多，那我们还要一个个的引入注册吗？

//引入vue
import Vue from 'vue'
//引入全局组件
import componentName1 from ‘@/components/component’
import componentName2 from ‘@/components/component’
import componentName3 from ‘@/components/component’
import componentName4 from ‘@/components/component’
import componentName5 from ‘@/components/component’
import componentName6 from ‘@/components/component’
...
//注册为vue全局组件
Vue.component('componentName1 ',componentName1)
Vue.component('componentName2 ',componentName2)
Vue.component('componentName3 ',componentName3)
Vue.component('componentName4 ',componentName4)
Vue.component('componentName5 ',componentName5)
Vue.component('componentName6 ',componentName6)
...

当然这样是没有问题的，可以正常使用，但每当使用一个全局组件，首先要再mian.js（vue默认入口文件）中如上引入注册。
做为资深强迫症患者，总感觉这些代码太冗余了。我们可以 结合require.context 方法来批量引入，使你的代码更有逼格，并告别冗余代码。
思路：
引入components（全局组件存放文件）下面的全部组件，并动态全局注册在vue中

步骤：
1、首先在components 中新建一个 global.js（自定义命名） 文件
global.js

//引入vue
import Vue from 'vue'
//引入同目录下的全部组件
const requireCom = require.context('.',false,/\.vue$/);
//依次进行注册
requireCom.keys().forEach(key => {
	//	字符串首字母大写处理
	function strUp(str){
		return str.charAt(0).toUpperCase() + str.slice(1);
	}
	//获取单个组件内容
	const _component = requireCom(key);
	//获取组件名称
	const _componentName = strUp(
	keys.replace(/^\.\//,'').replace(/\.\w+$/,''));
	
	//注册在vue上
	Vue.component(_componentName,_component.default || _component);
})

2、在入口文件main.js 中，引入这个global.js
main.js

import '@/components/global.js'

即全局注册完成，不管我们在components中声明多少个组件，都不用在重新引入注册了。