简单来说，插件就是指对Vue的功能的增强或补充。
比如说，让你在每个单页面的组件里，都可以调用某个方法，或者共享使用某个变量，或者在某个方法之前执行一段代码等
2、使用方法
总体流程应该是：
【声明插件】——【写插件】——【注册插件】——【使用插件】
写插件和声明插件是同步的，然后注册到Vue对象中（不用担心重复注册），最后在写Vue组件的时候使用写的插件
声明插件
先写一个js文件，这个js文件就是插件文件，里面的基本内容如下：
/* 说明： * 插件文件：service.js * 作者：王冬 QQ：20004604 * */ export default { install: function (Vue, options) { // 添加的内容写在这个函数里面 } };
其中install的第一个参数Vue表示的是Vue的实例，第二个参数表示的是一些设置选项。
Vue实例好理解，就是Vue对象。
而options设置选项就是指，在调用这个插件时，可以传一个对象。
例如这个对象有一个属性float，然后在写插件的一个方法/变量时，我需要输出一个数字，然后写一个if判断语句，
假如options.float为true时，输出浮点数；
假如为false或undefined（即没传参）时，输出为整数。
具体怎么添加，之后再说。
注册插件
如果使用过Vue-router，就很好理解，通过import引入后，然后通过 Vue.use(插件名) 注册插件；
例如，我们通常在main.js里引入各种东西，并且组件的根实例也在这里
//main.js import Vue from 'vue' import App from './App.vue' //关键是这两行 import service from './service.js' Vue.use(service) new Vue({ el: '#app', render: (h) => h(App) })
如代码中注释所说，关键是通过import导入service文件，然后在创建根组件之前，让Vue对象通过use方法来注册插件service。
通过这样简单的两步，就可以使用插件了。
3、写插件、使用插件
按照官方文档，写插件有四种方法，先给出官方的代码：
//以下内容都是添加到上面install的函数里面的 // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (options) { // 逻辑... }
先给出最常用的：【4. 添加实例方法】的写法和使用方法
3.1【添加实例方法或属性】
1、核心思想：
通过prototype来添加方法和属性。
2、写：
//让输出的数字翻倍，如果不是数字或者不能隐式转换为数字，则输出null Vue.prototype.doubleNumber = function (val) { if (typeof val === 'number') { return val * 2; } else if (!isNaN(Number(val))) { return Number(val) * 2; } else { return null } }
3、用：
假设有这样一个组件：
<template> <div> {{num}} <button @click="double">点击后让左边的数字翻倍</button> </div> </template> <script> export default{ data(){ return { num: 1 } }, methods: { double: function () { //这里的this.doubleNumber()方法就是上面写的组件里的方法 this.num = this.doubleNumber(this.num); } } } </script>
我们便可以通过点击button按钮，让num的值，在每次点击都翻倍了。
4、假如添加的是属性：
例如：
Vue.prototype.number = 1;
会发生什么事情呢？
1、不管是【按值传递类型】还是【按引用传递类型】，该变量都不会被不同组件所共享，更准确的说，假如有A、B两个组件。A组件里的number数值改变，B组件里的number数值是不会跟着改变的。因此不要想着引用这样一个变量，然后修改了A中的值，B里也自动跟着改变了；
2、当组件里没有该属性时，调用时，显示的是通过插件获取的值；
当组件里有该属性时，调用时，显示的是组件里该属性的值；
由此而推，函数也是这样的，组件里的同名函数总是会覆盖插件提供的函数。
也就是说，当插件提供一个属性时，组件里没这个属性，就用插件的属性；组件有，就用组件自己的。
3.2【添加全局方法或属性】
1、核心思想：
就是给Vue对象添加一个属性。
初次接触很容易和上面3.1弄混，实际上，3.1是给组件里使用的，而3.2是给Vue对象使用的。
例如，假如添加一个方法test()，那么：
通过3.1添加，是在组件里，通过this.test()来调用
通过3.2添加，是在外面，通过Vue实例，如Vue.test()来调用
2、写：
//放在哪里参考上面 Vue.test = function () { alert("123") }
3、用：
//注意先导入Vue对象才能使用 Vue.test()
使用时会执行对应的方法，比如这里就是alert弹窗
4、其他：
别问我如果和Vue本身属性同名会发生什么事情，我没试过=.=
3.3【注入组件】
1、核心思想：
就像写Vue组件时，那样写，方法名保持一致，其会在执行组件对应的方法名之前执行。
2、写：
例如：
Vue.mixin({ created: function () { console.log("组件开始加载") } })
然后这里的代码会在每个组件（包括根组件）的created执行之前执行。
可以自行在每个组件的created方法里写一段console.log来查看测试
可以和【实例属性】配合使用，用于调试或者控制某些功能