在學習全局組件之前，我們先擼個實例了解下：
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$/, '');? //獲取組件的命名---可以根據自己項目的實際情況進行修改
? ? Vue.component(componentName,?componentConfig.default || componentConfig);??//全局注冊組件（如果這個組件選項是通過 `export default`? ? ? 導出的，那么就會優先使用 `.default`，否則會回退使用模塊的根）
});
二、在main.js中引入該文件即可（放在new Vue之前）
<package-name><package-name/>//如何使用：無需引入，直接在頁面中使用

補充下知識點：

1、Vue.component() //注冊或獲取全局組件，注冊還會自動使用給定的id設置組件的名稱，說到它，就不免想到vue.extend() //創建一個局部組件構造器，構造器中有個選項對象，選項對象的template屬性用于自定義渲染HTML。

摘自官網API

1.1、創建局部組件構造器
? ? 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>