Vue 插件

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

通常用来为 Vue 全局。的范围没有严格的限制，一般有下面几种：

Vue 是对 Vue 全局的扩展，他可以给 Vue 全局、、组件、过滤器、指令等等。

通过全局 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)

集合了大量由社区贡献的和库。

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>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < 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: px;
  }
  .button{
    width: ;
    height: px;
    line-height: px;
    outline: none;
    margin: ;
    padding: ;
    @R_173_2@-sizing: border-@R_173_2@;
    cursor: pointer;
    
  }
  .button-default {
    background-color: #ffffff;
    color: #333333;
    border: px solid #ccc;
  }
  .button-primary {
    background-color: #39f;
    color: #ffffff;
    border: px solid #39f;
  }
  .button-warning {
    background-color: #f90;
    color: #ffffff;
    border: px solid #f90;
  }
  .button-success {
    background-color: #0c6;
    color: #ffffff;
    border: px 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 组件。

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

←Vue 渲染函数

VueRouter 基础应用→

Vue 插件

您的鼓励是对我最大的支持