在学习全局组件之前，先举个例子来理解：importLoadingfrom'./Loading.vue'//这个组件我就不写了，大家自己玩吧...constLoading={Install:function(Vue){Vue.component(“Loading”,Loading)}}exportdefaultLoading;通常我们在main.js文件中注册全局组件。importAppfrom'./App.vue'//importelement-uicomponentimportElementUifrom'element-ui'import'element-ui/lib/theme-default/index.css'importLoadingfrom'../components/loading'//引入自定义组件（注意引用组件的路径）Vue.use(Loading);Vue.use(ElementUi);newVue({el:'#app',render:h=>h(App)})最后直接在页面调用标签即可。上面的方法应该是大家常用的。今天我想给大家介绍一个新的方法。也是一般需要注册的全局组件很多时使用的方法（自动全局注册组件）：1.新建一个Js文件，global-components.jsconstrequireComponent=require.context('@/components/',true,/\.(vue)$/);1.'@/components/'//其组件目录相对路径2、true//是否查询其子目录3、/\.(vue)$///匹配底层组件文件名的正则表达式requireComponent.keys().forEach(item=>{constcomponentConfig=requireComponent(item);//获取组件配置//获取组件的名称---可以根据自己项目的实际情况修改constcomponentName=item.replace(/^\.\//,'').replace(/\/\index.vue$/,'');//全局注册组件，如果通过`exportdefault`导出该组件选项，那么将首先使用`.default`，否则将使用模块的根Vue.component(componentName,componentConfig.default||componentConfig);});2.导入main.js中的文件即可（newVue之前）//使用方法：不用导入，直接在页面使用补充以下知识点：1.Vue.component()//注册或获取全局组件，注册时会自动使用给定的id来设置组件的名称说到这里，不禁会想到vue.extend()//创建一个部分组件构造函数。构造函数中有一个选项对象。选项对象的模板属性用于自定义渲染HTML。创建组件构造器varlocalComponent=Vue.extend({template:'{{firstName}}{{lastName}}'data:function(){firstName:“xiaohua”,lastName:“zhang”}})newVue({el:'#root',components:{'my-component':localComponent}})在页面中使用：
