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

我会带着你远行 2022-06-07 07:40 214阅读 0赞

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

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

在最近的工作中，因为经常要用到element-ui中的一些组件，但是很多时候又需要一些自定义的功能，在查看了element-ui的部分源码后，基于自己的理解，实现了一个弹窗插件。  
github：[https://github.com/fisher-zh/fisher-ui][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)

[Link 1]: https://cn.vuejs.org/v2/guide/plugins.html
[https_github.com_fisher-zh_fisher-ui]: https://github.com/fisher-zh/fisher-ui