vue 中element ui 按需引入优化

vue中按需引入element ui，按照官网的引入方法，在main.js中会显的臃肿，所以对按需引入进行优化，代码更直观、简洁。

1、自定义 创建一个组件  ，组件内容如下

import Vue from 'vue'
import {
        MessageBox,
        Message,
        Loading,
        Notification,
        Tag,
        Switch,
        ColorPicker,
        Pagination,
        Dialog,
        Autocomplete,
        Dropdown,
        DropdownMenu,
        DropdownItem,
        Menu,
        Submenu,
        MenuItem,
        MenuItemGroup,
        Input,
        InputNumber,
        Radio,
        RadioGroup,
        RadioButton,
        Checkbox,
        CheckboxButton,
        CheckboxGroup,
        Select,
        Option,
        OptionGroup,
        Button,
        ButtonGroup,
        Table,
        TableColumn,
        DatePicker,
        Form,
        FormItem,
        Row,
        Col,
        Upload,
        Cascader,
        Container,
        Header,
        Aside,
        Main,
        Icon,
        Tooltip,
        Breadcrumb,
        BreadcrumbItem,
        Footer,
        Tree,
        Transfer,
        Progress,
        Card,
        Tabs,
        TabPane,
        Drawer,
        Popover,
        Badge,
        Alert,
	Image,
        Timeline,
        TimelineItem
} from 'element-ui'
let LoadingDirective = Loading.directive
const components = {
        LoadingDirective,
        Tag,
        Switch,
        ColorPicker,
        Pagination,
        Dialog,
        Autocomplete,
        Dropdown,
        DropdownMenu,
        DropdownItem,
        Menu,
        Submenu,
        MenuItem,
        MenuItemGroup,
        Input,
        InputNumber,
        Radio,
        RadioGroup,
        RadioButton,
        Checkbox,
        CheckboxButton,
        CheckboxGroup,
        Select,
        Option,
        OptionGroup,
        Button,
        ButtonGroup,
        Table,
        TableColumn,
        DatePicker,
        Form,
        FormItem,
        Row,
        Col,
        Upload,
        Cascader,
        Container,
        Header,
        Aside,
        Main,
        Icon,
        Tooltip,
        Breadcrumb,
        BreadcrumbItem,
        Footer,
        Tree,
        Transfer,
        Progress,
        Card,
        Tabs,
        TabPane,
        Drawer,
        Popover,
        Badge,
        Alert,
	Image,
        Timeline,
        TimelineItem
}

const elementConfig = {
        install(Vue) {
                Object.keys(components).forEach(key => Vue.use(components[key]))
        }
}
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$message = Message;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$loading = Loading.service;
Vue.prototype.$notify = Notification;
Vue.config.productionTip = false
export default elementConfig

需要用到的组件在里面注册一下

2、在main.js中引入这个组件并绑定在实例上

//element-ui按需引入
import elementConfig from "@/utils/main-config/element-config.js";
Vue.use(elementConfig);

这样在页面中就可以直接使用了