1. 简介

本节我们将介绍 Vue 的插件。包括什么是插件、如何使用插件、如何编写一个简单的插件。其中，编写和使用插件是本节的重点。本节我们将带领大家写一个简单的插件示例，同学们在学完本节后可以尝试编写其他的插件来加深学习。

2. xx解释

插件通常用来为 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({
  // ...组件选项
})

也可以传入一个可选的选项对象：

Vue.use(MyPlugin, { someOption: true })

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)

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) {
    // 逻辑...
  }
}

接下来，我们写一个具体的插件示例：

实例演示

预览复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-button>default</my-button>
    <div class="marigin"></div>
    <my-button type="default">default</my-button>
    <div class="marigin"></div>
    <my-button type="primary">primary</my-button>
    <div class="marigin"></div>
    <my-button type="warning">warning</my-button>
    <div class="marigin"></div>
    <my-button type="success">success</my-button>
  </div>
</body>
<style> .marigin{ margin-top: 10px; } .button{ width: 100%; height: 34px; line-height: 32px; outline: none; margin: 0; padding: 0; box-sizing: border-box; cursor: pointer; } .button-default { background-color: #ffffff; color: #333333; border: 1px solid #ccc; } .button-primary { background-color: #39f; color: #ffffff; border: 1px solid #39f; } .button-warning { background-color: #f90; color: #ffffff; border: 1px solid #f90; } .button-success { background-color: #0c6; color: #ffffff; border: 1px solid #0c6; } </style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript"> // 定义 MyPlugin const MyPlugin = {} MyPlugin.install = function(Vue, options) { Vue.component('MyButton',{ template: '<button :class="btnClass"><slot/></button>', props: { type: { type: String, default: 'default' } }, computed: { btnClass() { return ["button",`button-${this.type}`] } } }) } // 使用插件 MyPlugin Vue.use(MyPlugin) var vm = new Vue({ el: '#app', data() { return {} } }) </script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 3-20 行，我们定义了插件 MyPlugin，该插件中包含一个全局组件 MyButton。
JS 代码第 22 行，通过 Vue.use 使用 MyPlugin。
HTML 代码第 2、4、6、8、10 行，使用 MyPlugin 插件中的 MyButton 组件。

5. 小结

本节，我们带大家学习了 Vue 插件的使用方式。主要知识点有以下几点：

通过 Vue.use (“插件名字”) 使用插件。
通过 install 方法开发插件。

无极低码：https://wheart.cn

Vue入门教程Vue工程化Vue插件

1. 简介

2. xx解释

3. 使用插件

4. 开发插件

5. 小结