註冊全域性元件。

• 使用Vue.component()方法註冊全域性元件。
• 第一個引數是自定義元素名稱，也就是將來在別的元件中使用這個元件的標籤名稱。
• 第二個引數是將要註冊的Vue元件。

import Vue from 'vue';
// 引入loading元件 
import Loading from './loading.vue';
// 將loading註冊為全域性元件，在別的元件中通過<loading>標籤使用Loading元件
Vue.component('loading', Loading);

使用Vue.use註冊外掛。

• 這個方法接收一個引數。這個引數必須具有install方法。Vue.use函式內部會呼叫引數的install方法。
• 如果外掛沒有被註冊過，那麼註冊成功之後會給外掛新增一個installed的屬性值為true。Vue.use方法內部會檢測外掛的installed屬性，從而避免重複註冊外掛。
• 外掛的install方法將接收兩個引數，第一個是引數是Vue，第二個引數是配置項options。
• 在install方法內部可以新增全域性方法或者屬性、全域性指令、mixin混入、新增例項方法、使用Vue.component()註冊元件等。

import Vue from 'vue';

// 這個外掛必須具有install方法
const plugin = {
  install (Vue, options)
 
 {
    // 新增全域性方法或者屬性
    Vue.myGlobMethod = function () {};
    // 新增全域性指令
    Vue.directive();
    // 新增混入
    Vue.mixin();
    // 新增例項方法
    Vue.prototype.$xxx = function () {};
    // 註冊全域性元件
    Vue.component()
  }
}

// Vue.use內部會呼叫plugin的install方法
Vue.use(plugin);

示例

下面看一下element-ui裡面的實現。

在./src/index.js裡面第144行定義了一個install方法，後面匯出的物件裡面就引用了這個方法。然後在我們的專案中引入element-ui，必須要使用Vue.use()

// src/index.js
const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

module.exports = {
  version: '2.4.11',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination
  //...
}

如果想通過Vue.prototype.$xxx = xxx 或者通過特定的api使用元件，請看這篇部落格。