20Vue入门教程Vue插件

　　1. 简介
　　本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。 2. 木子解释插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制，一般有下面几种：
　　添加全局方法或者属性。如: vue-custom-element。
　　添加全局资源：指令 / 过滤器 / 过渡等。如 vue-touch。
　　通过全局混入来添加一些组件选项。如 vue-router。
　　添加 Vue 实例方法，通过把它们添加到  Vue.prototype   上实现。
　　一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router。
　　Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。 3. 使用插件
　　通过全局方法 Vue.use () 使用插件。它需要在你调用 new Vue () 启动应用之前完成： Vue.use(MyPlugin)  new Vue({   // ...组件选项 }) 代码块12345
　　也可以传入一个可选的选项对象： Vue.use(MyPlugin, { someOption: true }) 代码块1
　　Vue.use 会自动阻止多次注册相同插件，即使多次调用也只会注册一次该插件。 Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use ()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use ()： // 用 Browserify 或 webpack 提供的 CommonJS 模块环境时 var Vue = require(＂vue＂) var VueRouter = require(＂vue-router＂)  // 不要忘了调用此方法 Vue.use(VueRouter) 代码块123456
　　awesome-vue 集合了大量由社区贡献的插件和库。 4. 开发插件
　　Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象： const MyPlugin = {}  MyPlugin.install = function (Vue, options) {   // 1. 添加全局方法或属性   Vue.myGlobalMethod = function () {     // 逻辑...   }    // 2. 添加全局资源   Vue.directive(＂my-directive＂, {     bind (el, binding, vnode, oldVnode) {       // 逻辑...     }     ...   })    // 3. 注入组件选项   Vue.mixin({     created: function () {       // 逻辑...     }     ...   })    // 4. 添加实例方法   Vue.prototype.$myMethod = function (methodOptions) {     // 逻辑...   } } 代码块1234567891011121314151617181920212223242526272829
　　接下来，我们写一个具体的插件示例：
　　实例演示                         default          default          primary          warning          success        
　　＂运行案例＂ 可查看在线运行效果
　　代码解释：  JS 代码第 3-20 行，我们定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。 JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。 HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。 5. 小结
　　本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点： 通过 Vue.use (＂插件名字＂) 使用插件。 通过 install 方法开发插件。