自动化注册全局组件

1、在组件目录下，新建一个 index.js 文件，使用代码将该目录下所有 *.vue 文件提取，并遍历统一注册，并且封闭成插件；

/* 自动化注册全局组件 */
import Vue from 'vue';

function install () {
	var reFun = require.context('./', true, /\.vue$/i);
	var reArr = reFun.keys();
	reArr.map(function (item) {
		var vueMoud = reFun(item)['default'];
		var modObj = vueMoud.name;
		Vue.component(modObj, vueMoud);
	});
};

export default { install };

2、在入口文件 main.js （默认是main.js，请以项目实际入口文件为主）导入该文件，使用 Vue.use() 命令注册；

import AutoReg from 'components/index.js';
Vue.use(AutoReg);

3、需要注意的是，定义的所有组件暴露的模块中，必须包括有 name 属性，使用时请以 name 值作为组件名；

// 定义组件
<template>
	<div>
		<div class="demo-msg">{{ msg }}</div>
	</div>
</template>

<script>
	export default {
		name: 'DemoCom',
		data () {
			return {
				msg: '这是一个DEMO自动化注册组件实例'
			}
		}
	}
</script>

// 使用组件
<template>
    <div>
        <DemoCom></DemoCom>
    </div>
</template>

4、至此，我们在定义完组件之后，无需引入注册，可直接在项目全局任何一个地方直接引用。到这里感觉有点上头了……