1、概述

简单来说，插件就是指对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 
                        
关键字：