01 参数

{Object | Function} plugin

02 用法

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次。

03 参考

  1. MyPlugin.install = function (Vue, options) {
  2.   // 1. 添加全局方法或 property
  3.   Vue.myGlobalMethod = function () {
  4.     // 逻辑...
  5.   }
  7.   // 2. 添加全局资源
  8.   Vue.directive('my-directive', {
  9.     bind (el, binding, vnode, oldVnode) {
  10.       // 逻辑...
  11.     }
  12.     ...
  13.   })
  15.   // 3. 注入组件选项
  16.   Vue.mixin({
  17.     created: function () {
  18.       // 逻辑...
  19.     }
  20.     ...
  21.   })
  23.   // 4. 添加实例方法
  24.   Vue.prototype.$myMethod = function (methodOptions) {
  25.     // 逻辑...
  26.   }
  27. }


04 源码

我们可以从源码入手分析一下，基于vue 2.6.11 版本，源码地址为：src/core/global-api/use.js

  1. export function initUse (Vue: GlobalAPI) {
  2.   // 接受一个plugin参数，限制为 Function | Object两种类型
  3.   Vue.use = function (plugin: Function | Object) {
  4.     // _installedPlugins 存储所有注册过的 plugin
  5.     const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
  6.     // 保存注册组件的数组，不存在则创建，存在则直接返回，不允许重复注册
  7.     if (installedPlugins.indexOf(plugin) > -1) {
  8.       return this
  9.     }
  11.     // additional parameters
  12.     // 将传入的参数转换成数组
  13.     const args = toArray(arguments, 1)
  14.     // 将Vue对象拼接到数组头部
  15.     args.unshift(this)
  16.     // 如果提供了 install 方法，则直接调用
  17.     if (typeof plugin.install === 'function') {
  18.       // 如果组件是对象，且提供install方法，调用install方法将参数数组传入，改变`this`指针为该组件
  19.       plugin.install.apply(plugin, args)
  20.     } else if (typeof plugin === 'function') {
  21.       // 否则直接执行
  22.       plugin.apply(null, args)
  23.     }
  24.     // 将plugin存储到  installedPlugins，表示y已经注册过
  25.     installedPlugins.push(plugin)
  26.     return this
  27.   }
  28. }
  30. /**
  31.  * Convert an Array-like object to a real Array.
  32.  */
  33. export function toArray (list: any, start?: number): Array<any> {
  34.   start = start || 0
  35.   let i = list.length - start
  36.   const ret: Array<any> = new Array(i)
  37.   while (i--) {
  38.     ret[i] = list[i + start]
  39.   }
  40.   return ret
  41. }

基于 vue-router3.1.6 版本，源码位置： src/install.js

  1. import View from './components/view'
  2. import Link from './components/link'
  4. /*
  5.   export 一个 Vue 引用，在打包的时候不希望把 Vue作为依赖包打进去，但是又希望可以使用 Vue提供的一些方法，
  6. */
  7. export let _Vue
  9. // Vue.use安装插件时候需要暴露的install方法
  10. export function install (Vue) {
  11.   // 判断是否已安装过
  12.   if (install.installed && _Vue === Vue) return
  13.   install.installed = true
  15.   _Vue = Vue
  17.   const isDef = v => v !== undefined
  19.   const registerInstance = (vm, callVal) => {
  20.     let i = vm.$options._parentVnode
  21.     if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
  22.       i(vm, callVal)
  23.     }
  24.   }
  25.   // 混入 beforeCreate 
  26.   Vue.mixin({
  27.     beforeCreate () {
  28.       // 在option上面存在router则代表是根组件 
  29.       if (isDef(this.$options.router)) {
  30.         this._routerRoot = this
  31.         // 根组件的_router属性为，new Vue传进去的router
  32.         this._router = this.$options.router
  33.         // 执行 init方法
  34.         this._router.init(this)
  35.         // 通过defineReactive方法，来把this._router.history.current变成响应式的，这个方法的底层就是object.defineProperty
  36.         Vue.util.defineReactive(this, '_route', this._router.history.current)
  37.       } else {
  38.         // 如果该组件不是根组件，那么递归往上找，直到找到根组件的。
  39.         this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
  40.       }
  41.       registerInstance(this, this)
  42.     },
  43.     destroyed () {
  44.       registerInstance(this)
  45.     }
  46.   })
  47.   /*
  48.     下面通过给 Vue.prototype定义$router、$route属性后，所有的Vue实例（组件）都可以直接访问到
  49.   */
  51.   // 设置代理，访问 this.$router 时直接代理到 this._routerRoot._router
  52.   Object.defineProperty(Vue.prototype, '$router', {
  53.     get () { return this._routerRoot._router }
  54.   })
  55.   // 设置代理，访问 this.$route 时直接代理到 this._routerRoot._route
  56.   Object.defineProperty(Vue.prototype, '$route', {
  57.     get () { return this._routerRoot._route }
  58.   })
  60.   // 注册 router-view 和 router-link 组件
  61.   Vue.component('RouterView', View)
  62.   Vue.component('RouterLink', Link)
  64.   const strats = Vue.config.optionMergeStrategies
  65.   // use the same hook merging strategy for route hooks
  66.   strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
  67. }
  71. // 组件的注册
  72. const install = function(Vue, opts = {}) {
  73.   locale.use(opts.locale);
  74.   locale.i18n(opts.i18n);
  76.   components.forEach(component => {
  77.     Vue.component(component.name, component);
  78.   });
  80.   Vue.use(InfiniteScroll);
  81.   Vue.use(Loading.directive);
  83.   Vue.prototype.$ELEMENT = {
  84.     size: opts.size || '',
  85.     zIndex: opts.zIndex || 2000
  86.   };
  88.   Vue.prototype.$loading = Loading.service;
  89.   Vue.prototype.$msgbox = MessageBox;
  90.   Vue.prototype.$alert = MessageBox.alert;
  91.   Vue.prototype.$confirm = MessageBox.confirm;
  92.   Vue.prototype.$prompt = MessageBox.prompt;
  93.   Vue.prototype.$notify = Notification;
  94.   Vue.prototype.$message = Message;
  96. };
  98. /* istanbul ignore if */
  99. if (typeof window !== 'undefined' && window.Vue) {
  100.   install(window.Vue);
  101. }

vue-router中的install方法主要做了以下几件事：

  1. 通过 mixin混入的方式，如果是根组件，则直接把根组件的 _router 设置为 this.$options.router
  2. 如果不是根组件，那么递归往上找，直到找到根组件的，使用_routerRoot标记
  3. 通过给 Vue.prototype定义$router、$route属性后，使得所有的Vue实例（组件）都可以直接访问到 $router、$route 属性
  4. 注册<router-link>、<router-view>组件