Vue插件之install方法封装element-ui组件(按需引入)

前言

Vue中引用element-ui组件库可采用全局引入和按需引入，按需引入的优点是可以根据实际所需进行插件的进入，从而减少项目压缩的体积大小，此处只介绍按需引入。

环境配置 & 封装

按需引入需要借助babel-plugin-component插件来实现，同时需要在babel.config.js文件中进行相应的配置，具体操作可参考官网。简单的按需引入可在main.js文件中直接实现，例如：

import { Button, Input } from 'element-ui';

Vue.use(Input);
Vue.use(Button);
// 书写方式2：Vue.component(Button.name, Button)

然而当项目中需要引入大量的插件时，则可以考虑对引入的插件进行一个封装，此时需要借助Vue.js插件中的 install 方法。在Vue.js框架的底层逻辑中，调用use方法时将默认执行 install(Vue, options) 方法，并且默认传入参数：构造器 Vue 和可选配置 options ，此时可以封装为：

// ./component/plugins/index.js文件
import {
    Button,
    Input,
    Form
} from 'element-ui';

const pluginsArr = [
    Button,
    Input,
    Form
]

export default {
	install:function(Vue, options){
        pluginsArr.forEach(component => {
        	Vue.component(component .name, component );
        });
    }    
}

main.js中引入plugins文件并注册：

// main.js文件
import Plugins from '@/component/plugins';
import Vue from 'vue';
Vue.use(Plugins);

在组件中使用el-button：

<template>
  <div>
    <el-button type="warning">button</el-button>
  </div>
</template>

效果：