定义全局自定义组件

在我们项目开发中，经常需要import或者export各种模块
import C from ‘components/C’
import D from ‘components/D’
…

因为每加一个组件，都要写这么一句，有规律的事，可以通过自动化完成
定义全局组件的方式： main.js中

Vue.component('myComponent', {render(){return <h1>hello world</h1>}})

其实可以利用webpack中require.context：
require.context(directory, useSubdirectories, regExp)
可以将全局组件（.vue），注意props属性（例如：title)和name属性（例如：name:‘my-list’)等，和另一个index.js（将代码读取与输出）放入指定的目录.注意：是每个组件一个文件夹，文件夹下面是组件和index.js
并在global目录下创建index.js文件，进行多个文件夹进行读取

//返回的是webpackContext方法：说明
webpackContext(req) {
var id = webpackContextResolve(req);
return __webpack_require__(id);
}


//index.js内容
import Vue from 'vue'
const componentsContext = require.context('./', true, /\.js$/);
componentsContext.keys().forEach(component => {
const componentConfig = componentsContext(component)
// 兼容import export和require module.export两种规范
const ctrl = componentConfig.default || componentConfig;
// 加载全局组件
if (ctrl && ctrl.name) {
	Vue.component(ctrl.name, ctrl);
}
})

再将组件目录导入项目的main.js中

import './components/global'

使用时,根据name属性的值：

<my-list :title="quanjuzujain"/>