vue.js学习笔记（七）--插件

版权声明：本文为博主原创文章，转载请注明出处。如对文章知识有关问题欢迎评论和右侧chat快问提出。 https://blog.csdn.net/sir1241/article/details/78236783

在日常的项目中，如果我们需要频繁的使用某些功能，那么最好的办法就是将这个功能封装成函数来使用。在vue中，我们同样也会经常将常用的组件分离出来，这样既便于我们的使用，同时也便于之后的维护。

同样，当某个组件在许多项目中都要频繁的使用，那么我们可以将其写成一个插件，vue官方的文档中也有简单的介绍插件的开发和使用方法

在最近的工作中，因为经常要用到element-ui中的一些组件，但是很多时候又需要一些自定义的功能，在查看了element-ui的部分源码后，基于自己的理解，实现了一个弹窗插件。
github：https://github.com/fisher-zh/fisher-ui
有兴趣的小伙伴可以去git上拿下来直接查看源代码。

Vue插件实现流程：

插件我认为可以理解为一个在全局声明的组件。我们在使用自定义组件的时候时候需要在每个使用到文件中引入，但是如果在全局引入了插件那么就可以直接使用。当然element-ui之类的按需加载例外，那个之后再说。

在插件内部的代码其实和组件基本是没有什么差别的，插件区别于组件的地方就在于其要公开一个install方法。这个方法的写法在官方文档已经很清晰了，这里不再赘述。

以我所实现的弹窗插件为例，我所使用的是直接在Vue实例上挂载一个全局的方法。

import MessageBox from './src/main.js'

const install = function(Vue, opt = {}) {
  Vue.prototype.$messageBox = MessageBox
}

export default {
  install,
  MessageBox
}

使用

import MessageBox from '../packages/message-box'
Vue.use(MessageBox)