本文共 948 字，大约阅读时间需要 3 分钟。

一,前言

实际开发中,大多都是使用插件,而不会去自定义插件这里只是作为简单介绍,目的在于了解

二,插件

插件的功能:

为Vue添加全局功能

插件的范围:

添加全局方法或者属性，如: vue-custom-element添加全局资源：指令/过滤器/过渡等，如 vue-touch通过全局mixin方法添加一些组件选项，如: vue-router添加Vue实例方法，通过把它们添加到 Vue.prototype 上实现。

插件需要提供什么:

提供自己的 API，提供上面提到的一个或多个功能

三,插件的使用

在新建的js文件中编码自定义Vue插件:

(function (window) {  const MyPlugin = {}  //插件对象必须要有install()  MyPlugin.install = function (Vue, options) {    // 添加全局方法或属性    Vue.myGlobalMethod = function () {      console.log('执行Vue全局方法')    }    // 添加全局资源,指令/过滤器/过渡等    Vue.directive('my-directive',function (el, binding) { el.textContent = binding.value.toUpperCase() })    // 添加实例方法-通过Vue的prototype原型对象添加实例方法(实例方法已$开头)    Vue.prototype.$myMethod = function () {      console.log('执行Vue实例方法')    }  }  // 通过全局 mixin 方法添加一些组件选项  // 绑定到window,对外暴露  window.MyPlugin = MyPlugin;})(window)

引入自定义的Vue插件js文件

运行结果:

控制台输出:

执行Vue全局方法执行Vue实例方法

四,结尾

关于自定义插件就简单了解到这里,截止到这里,Vue的第一部分应该算是已经完成了下一篇开始介绍Vue工程化,Vue-cli的使用