随着Vue.js越来越流行，Vue.js的相关插件也在源源不断的贡献着，不计其数。比如官方推荐的vue-router、vuex等，都是非常优秀的插件。但是我们更多的人还停留在使用的阶段，自己开发的更少。那么接下来，我们就通过一个简单的vue-toast插件来了解和掌握插件的开发和使用。认识插件如果你想开发一个插件，你首先要知道一个插件是什么样子的。Vue.js的插件应该有一个公共方法install。该方法的第一个参数是Vue构造函数，第二个参数是一个可选的选项对象：MyPlugin.install=function(Vue,options){Vue.myGlobalMethod=function(){//1。添加全局方法或属性，如：vue-custom-element//logic...}Vue.directive('my-directive',{//2.添加全局资源：directive/filter/transition等，如asvue-touchbind(el,binding,vnode,oldVnode){//logic...}...})Vue.mixin({created:function(){//3.通过全局mixin方法添加一些组件选项,比如:vuex//逻辑...}...})Vue.prototype.$myMethod=function(options){//4.添加实例方法，通过在Vue.prototype中添加来实现//logic...}}Next要说的vue-toast插件是通过添加实例方法来实现的。我们先来看一个小例子。先新建一个js文件写插件：toast.js//toast.jsvarToast={};Toast.install=function(Vue,options){Vue.prototype.$msg='HelloWorld';}module.exports=吐司；在main.js中需要导入toast.js，通过全局方法Vue.use()使用插件：//main.jsimportVuefrom'vue';importToastfrom'./toast.js';Vue.use(Toast);然后，我们在组件中获取插件定义的$msg属性。//App.vueexportdefault{mounted(){console.log(this.$msg);//HelloWorld}}可以看到控制台成功打印出了HelloWorld。现在可以获取$msg了，我们可以实现我们的vue-toast插件了。开发vue-toast需求：在组件中调用this.$toast('Networkrequestfailed')弹出提示，默认显示在底部。通过调用this.$toast.top()或this.$toast.center()等方法可以在不同的位置显示。整理一下思路，在弹出提示的时候，我可以在body中添加一个div来显示提示信息。我可以通过添加不同的类名来定位到不同的位置，然后就可以开始写了。//toast.jsvarToast={};Toast.install=function(Vue,options){Vue.prototype.$toast=(tips)=>{lettoastTpl=Vue.extend({//1.创建构造函数并定义它提示信息模板模板：'
