Vue2 插件编写

Question

Vue 插件是一个带有 install 方法的对象，接受两个参数：

• 全局 Vue 对象
• 和一个包含用户定义的 options 的对象

构建插件

import MyComponent from './components/MyComponent.vue'
import MyDirective from './directives/MyDirective.js'

const MyPlugin = {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {

    // 添加组件生命周期钩子或属性
    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });

    // 安装 app 范围的组件和指令
    Vue.component(MyComponent.name, MyComponent)
    Vue.directive(MyDirective.name, MyDirective)

    // 修改全局 Vue 对象
    Vue.myAddedMethod = function() {
      return Vue.myAddedProperty
    }

    // 修改 Vue 实例
    Vue.prototype.$myAddedProperty = 'Example Property'
    Vue.prototype.$myAddedMethod = function() {
      return this.$myAddedProperty
    }

  }
};

export default MyPlugin;

使用

import Vue from 'vue'
import MyPlugin from './my-vue-plugin.js'
import App from './App.vue'

Vue.use(MyPlugin)

new Vue({
  el: '#app',
  render: h => h(App)
});

自动安装

当其他人在模块系统之外使用插件时，如果插件包含在 Vue 脚本标记之后，则通常希望能够自动安装而不需要调用 Vue.use() 。可以通过将下面这些代码行附加到 my-vue-plugin.js 的末尾来实现：

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(MyPlugin)
}

如果 Vue 已添加到全局范围，则自动安装。

分发插件

编写完插件后，你可以将其分发到社区。步骤如下：

1. 将源代码和可分发文件发布到 npm 和 GitHub。确保为代码选择合适的许可证！
2. 向官方 Vue cool-stuff-discovery 存储库打开 pull 请求： awesome-vue 。
3. （可选步骤）在 Vue 论坛、Vue Gitter 频道和 Twitter 上发布主题标签 #vuejs 。