Vue.js插件书写规范

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,547评论 7 35
  • 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue开源插件...
    劳卜阅读 13,986评论 2 57
  • 社会是以人为主的大关系网。而关系是最微妙的连接点。没有足够的了解与共处,简单的一句话会引发各类歧义。每个人的生活习...
    灯火扰乱阅读 1,137评论 0 0
  • 1. Jenkins介绍 Jenkins是基于java的自动化系统平台(在servlet容器中运行,例如Tomca...
    Cassie测试路阅读 12,257评论 5 2
  • Picture Krita KDE桌面的图像处理软件GIMP Linux下的PS 编辑器 Notepad++ At...
    Saber真是太可爱了阅读 3,838评论 0 0