Vue插件

官网插件地址
官网自定义指令
参考文章
参考文章

一、Vue插件介绍

• 理解插件与组件

一个Vue插件可以是一堆Vue组件的集合（插件干的事就是把内部的组件帮你倒入到vue全局下）；

• 插件分类

  1. 添加全局方法或者属性，如: vue-custom-element
  2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
  3. 通过全局 mixin 方法添加一些组件选项，如: vue-router
  4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
  5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

二、准备

1. 安装：vue init webpack
2. 新建src/plugin.js，加入初始内容：

let MyPlugin = {}

MyPlugin.install = (Vue, options) => {

}

export default MyPlugin

或

export default{
  install (Vue, options) {
    
  }
}

3. 在main.js中引入

import MyPlugin from './plugin'

Vue.use(MyPlugin)

三、插件学习

1-1. 全局属性

// 1-1 全局属性
  Vue.globalName = '全局属性'

全局属性

1-2. 全局方法

 // 1-2 全局方法
  Vue.globalMethod = () => {
    return '全局方法'
  }

全局方法

2. 全局资源

  // 2 添加全局资源
  // 注册一个全局自定义指令 `v-focus`
  Vue.directive('focus', {
    // 只调用一次，指令第一次绑定到元素时调用
    bind: (el, binding, vnode, oldVnode) => {
      console.log('bind', el, binding, vnode, oldVnode)
    },
    // 被绑定元素插入父节点时调用
    inserted: (el, binding, vnode, oldVnode) => {
      console.log('inserted', el)
      el.focus()
    }
  })

注册全局自定义指令：v-focus

3. 注入组件

  // 3 注入组件
  Vue.mixin({
    created: () => {
      console.log('global mixin')
    }
  })

注入组件

4. 添加实例方法

  // 4 添加实例方法
  Vue.prototype.$myMethod = (methodOptions) => {
    return 'instance method'
  }

实例方法

plugin.js文件

let MyPlugin = {}

MyPlugin.install = (Vue, options) => {
  // 1-1 全局属性
  Vue.globalName = '全局属性'

  // 1-2 全局方法
  Vue.globalMethod = () => {
    return '全局方法'
  }

  // 2 添加全局资源
  // 注册一个全局自定义指令 `v-focus`
  Vue.directive('focus', {
    // 只调用一次，指令第一次绑定到元素时调用
    bind: (el, binding, vnode, oldVnode) => {
      console.log('bind', el, binding, vnode, oldVnode)
    },
    // 被绑定元素插入父节点时调用
    inserted: (el, binding, vnode, oldVnode) => {
      console.log('inserted', el)
      el.focus()
    }
  })

  // 3 注入组件
  Vue.mixin({
    created: () => {
      console.log('global mixin')
    },
    methods: {
      mixinMethod () {
        return 'mixinMethod'
      }
    }
  })

  // 4 添加实例方法
  Vue.prototype.$myMethod = (methodOptions) => {
    return 'instance method'
  }
}

export default MyPlugin

5. 插件封装组件

loading插件

• 5.1. 引用loading组件
  /src/components/loading.vue

<template>
  <div class="loading-box" v-if="show">
    <div class="loading-mask"></div>
    <div class="loading-content">
      <div class="animate"></div>
      <div class="text">{{text}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    show: Boolean,
    text: {
      type: String,
      default: '正在加载中...'
    }
  }
}
</script>

以上是一个loading.vue组件，省略了样式部分，在没有封装插件之前，我们只能通过import引入并注册到components对象中才能在页面中使用，如：

<template>
  <div id="app">
    <loading :show="true" ></loading>
  </div>
</template>

<script>
import Loading from '@/components/loading.vue'
export default {
  name: 'App',
  components: {
    Loading
  }
}
</script>

• 5.2 封装loading组件：src/components/loading.js

import LoadingComponent from './loading.vue'

let $vm

export default {
  install (Vue, options) {
    if (!$vm) {
      // 通过Vue.extend()，创建构造器
      const LoadingPlugin = Vue.extend(LoadingComponent)

      // 创建$vm实例，并挂载到div元素上
      $vm = new LoadingPlugin({
        el: document.createElement('div')
      })

      document.body.appendChild($vm.$el)
    }

    // 默认不显示
    $vm.show = false

    // 封装方法
    let loading = {
      show (text) {
        $vm.show = true
        if (text) {
          $vm.text = text
        }
      },
      hide () {
        $vm.show = false
      }
    }

    if (!Vue.$loading) {
      Vue.$loading = loading
    }

    // Vue.prototype.$loading = Vue.$loading

    Vue.mixin({
      created () {
        this.$loading = Vue.$loading
      }
    })
  }
}

在main.js引入

...
import Loading from '@/components/loading.js'

Vue.use(Loading)
...

在App.vue中使用

...
  created () {
    this.$loading.show()
  }
...

四、插件发布

1. 发布准备

在npm官网注册一个账号，网址：https://www.npmjs.com/

2. 发布目录

├── lib // 插件源码
│   ├── components // 组件目录
│   │   └── loading.vue // 组件文件
│   └── index.js  // 插件入口文件
├── index.js // 入口文件
└── package.json  // 包管理文件

3. 发布

发布命令：

npm login
cd 目录
npm publish

发布

注意：如果npm镜像是淘宝镜像，先切换到npm镜像再登录发布

发布成功后，安装试一下：

安装已发布的插件

全部代码可以在github仓库查看：https://github.com/xuyufei/vue-plugin