首先，你需要了解外掛實現的基本原理   外掛基本原理：   我們都知道用Vue.use註冊外掛，那你知道Vue.use(plugin) 幹了什麼？ 以下是我對Vue官網的一些摘錄和個人的理解   Vue.use( plugin )   引數： {Object | Function} plugin   用法： 安裝 Vue.js 外掛。 如果外掛是一個物件，必須提供 install 方法。如果外掛是一個函式，它會被作為 install 方法。 install 方法呼叫時，會將 Vue 作為引數傳入。 該方法需要在呼叫 new Vue() 之前被呼叫。 當 install 方法被同一個外掛多次呼叫，外掛將只會被安裝一次。   舉個栗子：   Vue.use(MyPlugin)   // 相當於：1）如果MyPlugin是一個物件，等價於 MyPlugin.install(Vue)。 　　　　　　　　　　　　　　　2）如果MyPlug是一個函式， 則等價於 MyPlugin(Vue)   結論：如果引入的外掛是一個物件，那麼此對像必須有install 方法，因為 Vue.use要用。 如果是函式，直接當做install方法呼叫。   由上面的結論可知，如果我們開發的外掛是以物件形式出現，那麼它的基本結構應該如下所示： (以下摘錄自Vue官方文件)   // MyPlugin.js 檔案 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) { // 邏輯... } } export default MyPlugin     到此，你可能對如何在全域性中新增方法有所感悟，但對於如何呼叫此方法並在頁面中顯示相應的內容可能還是有所疑問。 下面，就跟隨我的腳步，依照我寫的demo一起學習下吧。     以下是我寫的 Vue 外掛 的小demo

  目標： 固定在視窗頂部的訊息提示窗     開發流程： 1、首先編寫出符合要求的元件模板  

// message.vue
<template>
  <div class="ive-msg-block" v-if="isShowing">{{msg}}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: '',
      isShowing: 
 
false
    }
  },
  methods: {
    show (notice) {
      this.msg = notice.msg
      this.isShowing = true
      let duration = notice.duration || 1500
      setTimeout(() => {
        this.isShowing = false
      }, duration)
    }
  }
}
</script>
<style scoped>
  .ive-msg-block {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
  }
</style>

 

  2、利用 Vue.extend() 方法對其進行初始化封裝  

// message.js 
import Vue from 'vue'
import message from './message.vue'

var _msgConstructor = Vue.extend(message)
var imessage = () => {
  // 防止多次註冊
  if (imessage.installed) return
  // 獲取例項（此處可通過傳遞屬性值給模板，模板可通過props屬性接受）
  var instance = new _msgConstructor()
  // 獲取DOM，並掛載到body中
  var _msgComponent = instance.$mount()
  document.body.appendChild(_msgComponent.$el)
  // 返回需要後需新增到Vue全域性中的方法和屬性
  return {
    component: instance,
    notice (noticeProps) {
      instance.show(noticeProps)
    }
  }
}

export default imessage

 

  3、由於我想要寫的外掛是以物件的形式暴露出去，故一定要記得新增install方法，並在install方法中，將外掛需要用到的方法新增到Vue的原型鏈中。  

// index.js
import notification from './message'
let messageInstance

function getMessageInstance () {
  messageInstance = notification && notification()
  return messageInstance
}

// 呼叫初始化方法，獲得例項並掛載到html中，並根據傳入的引數顯示對應的訊息和顯示時長
function notice (options) {
  let instance = getMessageInstance()
  instance.notice(options)
}

// 此處你可能有疑惑，為什麼做了許多重複的事，其實本來我想實現的外掛功能應該更加強大，但是初學遇到許多問題就暫時先實現一個簡單的功能，然後預留介面，方便後續擴充套件
export default {
  name: 'Message',
  install (Vue) {
    Vue.prototype.$Message = this
  },
  show (options) {
    this.message(options)
  },
  message (options) {
    notice(options)
  }
}

 

  4、最後，在入口檔案引入並註冊  

import  Message from './Plugins/index'
Vue.use(Message)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

  總結：這是我寫的外掛初版原稿，其中有許多可以優化的地方，也有許多可以擴充套件的地方，比如可以參照其他成熟UI元件的樣式，新增多種樣式的提示框，可以調節視窗的位置，可以手動關閉等功能。 這篇文章主要的目的是為了記錄下我從小白到入門的學習過程，同時也希望能對其他想要學習Vue的朋友們有所幫助。