结合elementUI源码谈Vue.use的使用

官方解释Vue.use方法的使用：

Vue.use( plugin )

• 参数：

  • {Object | Function} plugin

• 用法：

  安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

  该方法需要在调用 new Vue() 之前被调用。

  当 install 方法被同一个插件多次调用，插件将只会被安装一次。

画重点： 

如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入

看elementUI源码：

下面的是elementUI button组件的部分代码段，export default导出的是一个对象,源码目录是：

packages/button/src/button.vue

<script>
  export default {
    name: 'ElButton',
    ...
  }
</script>

 下面是将button组件导出成插件，可以看到为ElButton组件添加了一个install方法，同时install方法的参数是Vue。源码路径是：packages/button/index.js

import ElButton from './src/button';

/* istanbul ignore next */
ElButton.install = function(Vue) {
  Vue.component(ElButton.name, ElButton);
};

export default ElButton;

然后，在element/src/index.js文件中，elementUI将所有的组件导出成插件，关键代码片段如下：

import Button from '../packages/button/index.js';

...

export default {
    Button
}

经过上面几步操作后，我们可以在我们自己的文件中单独引入Button组件，请注意，是单独引入组件，而不是整体引入elementUI，这是因为假如整体引入elementUI， 需要这样写：

import Element from 'element-ui';
Vue.use(Element, {
  size: Cookies.get('size') || 'medium' // set element-ui default size
});

 然而，当需要使用Vue.use方法时，对use的插件有要求，要么是带有install方法的对象，要么是一个函数，看前一步代码可知，export default只导出了一个对象，对象中只有Button组件，没有install方法，因此，就无法通过import Element from ‘element-ui’这种方式进行全局引入。怎么办？继续看下面源码：element/src/index.js

import xxx from '......';

const components = [
  Pagination,
  Dialog,
  Autocomplete,
    ...
  Button,
    ...
]

const install = function(Vue, opts = {}) {

  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

};

export default {
    install,
      ...
    Button,
      ...
}

 在文件中定义了一个components数组，数组中是在本文件中引入的组件，然后又定义了一个install方法，方法中执行的是循环通过Vue.component注册组件，同时install方法接收的第二个参数，就是Vue.use方法传入的第二个参数，通过此参数可以在install方法内对elementUI进行一些配置，最后在下面的export default导出的对象中，增加了install。此时此刻，再通过全局引入elementUI的方式引入，Vue.use时就会自动找到插件中的install方法并执行，也就会自动去注册elementUI中所有的组件了。

以上是Vue.use的插件是对象的情况，下面再举一个插件是函数的例子：

import filters from './filters'

export default (Vue,options) => {
    Object.keys(filters).forEach(key => {Vue.filter(key, filters[key])});
}

以上代码段实现的是导出filter插件。export default导出的是一个函数，在引用此插件时的写法：

import Filter from '@Company/filters'

Vue.use(Filter);

当插件是个函数时，Vue.use会自动将插件做为install方法执行。