Vue 开发自定义插件学习记录 -- 入门

Posted 2021-01-13 moshou-dota

首先，你需要了解插件实现的基本原理

 

插件基本原理：

 

我们都知道用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的朋友们有所帮助。