在学习全局组件之前，我们先撸个实例了解下：
import Loading from './Loading.vue' // 这个组件就不写了，大家各自发挥吧……
const Loading = {
Install: function (Vue) {
Vue.component(“Loading”, Loading)
}}
export default Loading;
通常我们在main.js文件里注册全局组件。
import App from './App.vue'// 引入element-ui组件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import Loading from '../components/loading'// 引入自定义组件（注意引用组件的路径）
Vue.use(Loading);
Vue.use(ElementUi);
new Vue({
el: '#app',
render: h => h(App)
})
最后在页面直接调用<loading></loading>标签就可以了。
上面这个方法应该是大家经常使用的，今天我想给大家介绍一个新的方法，也是后续如果遇到需要注册全局组件的量比较多的时候，普遍采用的一种方法（自动化全局注册组件）：
一、新建一个Js文件，global-components.js
const requireComponent = require.context( '@/components/', true,/\.(vue)$/);
1、'@/components/'// 其组件目录的相对路径
2、true// 是否查询其子目录
3、/\.(vue)$/// 匹配基础组件文件名的正则表达式
requireComponent.keys().forEach(item=> {
const componentConfig = requireComponent(item);// 获取组件配置
// 获取组件的命名---可以根据自己项目的实际情况进行修改
const componentName = item.replace(/^\.\//, '').replace(/\/\index.vue$/, '');
// 全局注册组件，如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`，否则会回退使用模块的根
Vue.component(componentName,componentConfig.default || componentConfig);
});
二、在main.js中引入该文件即可（放在new Vue之前）
// 如何使用：无需引入，直接在页面中使用
<package-name><package-name/>
补充下知识点：
1、Vue.component() // 注册或获取全局组件，注册还会自动使用给定的id设置组件的名称
说到它，就不免想到vue.extend()
// 创建一个局部组件构造器，构造器中有个选项对象，选项对象的template属性用于自定义渲染HTML。
- 创建组件构造器
var localComponent= Vue.extend({
template: '<li>{{firstName}} {{lastName}}</li>'
data: function() {
firstName: “xiaohua”,
lastName: “zhang”
}})
new Vue({
el: '#root',
components: {
'my-component': localComponent
}})
在页面中使用：<local-component></local-component>
