Vue.js插件书写规范

2023年5月31日 272次阅读 来源: 某门丶

Vue插件书写规范，导出install方法

使用时，可以通过以上主流写法将自定义插件挂载到Vue上面：

import Vue from 'vue'
import YourPlugin from 'YourPlugin'
Vue.use(YourPlugin)

闭包里exports一个install方法

(function () {

  function install (Vue) {
    Vue.YourPlugin = function (options) {
      
    }
  }
// 这里为了支持CMD,AMD,CommonJs,以及script标签导入的方式
  if (typeof exports == "object") {
    module.exports = install
  } else if (typeof define == "function" && define.amd) {
    define([], function(){ return install })
  } else if (window.Vue) {
    Vue.use(install)
  }

})()

至于为什么要这样写,为什么要导出install方法？相信大家肯定有疑问，这里摘录Vue源码的use方法,大家就能一目了然

Vue.use = function (plugin) {
    /* istanbul ignore if */
    if (plugin.installed) {
      return
    }
    // additional parameters
    var args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else {
      plugin.apply(null, args)
    }
    plugin.installed = true
    return this
  }

当前后续最好将插件通过npm publish发布到npm包里面，这样其他小伙伴就能通过以下方式直接安装了

npm install YourPlugin
    原文作者：某门丶
    原文地址: https://www.jianshu.com/p/2b48887c85cc
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞