Vue.use()

1. 方法接收一個引數。這個引數必須具有install方法。Vue.use函式內部會呼叫引數的install方法。

2. 如果外掛沒有被註冊過，那麼註冊成功之後會給外掛新增一個installed的屬性值為true。Vue.use方法內部會檢測外掛的installed屬性，從而避免重複註冊外掛。

3. 外掛的install方法將接收兩個引數，第一個是引數是Vue，第二個引數是配置項options。

4. 在install方法內部可以新增全域性方法或者屬性、全域性指令、mixin混入、新增例項方法、使用Vue.component()註冊元件等。

MyPlugin.install = function (Vue, options) {
  
 
// 1. 新增全域性方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }

  // 2. 新增全域性資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 注入元件選項
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 新增例項方法
  Vue.prototype.$myMethod = function (methodOptions) {
    
 
// 邏輯...
  }
  
  // 5. 新增元件
  Vue.component()
}

解析element-ui元件庫是如何註冊的

1、main.js檔案中引入element-ui

import ElementUI from 'element-ui'

Vue.use(ElementUI)

2、呼叫ElementUI物件下的install方法

index.js檔案中匯入了所有的元件，存放在components變數中，然後再install中迴圈全域性註冊元件

3、單獨全域性註冊某一個元件

在main.vue中定義了aside元件

在aside/index.js檔案中匯入元件並定義install方法

然後再main.js中單獨註冊

import { Aside } from 'element-ui'

Vue.use(Aside)// 就會呼叫Aside元件物件中的install進行全域性註冊
 

// 頁面中就可以直接使用該元件
<aside></aside>

寫一個自己的元件庫

元件index.vue

在index.js中引入元件，並定義install方法

main.js中註冊

注意：和示例的區別在於匯出的是install方法，目前看兩種都可以

參考

vue官網教程：外掛

理解vue.use和開發元件庫