elementUI如何实现按需引入和全局引入？

1、全局引入

npm install element-ui -S

main.js中全局引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2、按需引入

2.1、借助 babel-plugin-component ，引入我们需要的组件，减少项目体积

npm install babel-plugin-component -D

2.2、修改babel.config.js的内容

//babel.config.js 全文内容如下
module.exports = {
 	// 这是创建项目初始化自带的
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    // 这里是我们需要添加的
    plugins: [
        [
            'component',
            {
                libraryName: 'element-ui',
                styleLibraryName: 'theme-chalk'
            }
        ]
    ]
}

2.3、创建 src / element / elementUI.js文件，用于需要按需引入的部分组件

import {
    OptionGroup,
    Select,
    Option
} from "element-ui"

const element = {
    install: function(Vue) {
        Vue.use(Select);
        Vue.use(Option);
        Vue.use(OptionGroup);
    }
};
export default element;

2.4在main.js中引入并使用

import elementUI from "./element/elementUI";
//css样式仍然需要全部引入
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(elementUI);