前言
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>
效果: