在开发过程中我们可以通过按需引入的方式引入所需要的组件，以达到减小项目体积的目的：
步骤一：使用babel-plugin-component插件。
运行命令行
npm install babel-plugin-component -D
2、修改babel.config.js文件
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}]]}
3、为了方便管理，建议在src文件夹下创建element-ui文件夹，并在里面创建index.js文件配置需要的组件。
import {Button, Option, Select, Switch, MessageBox, Message } from 'element-ui'const element = {install: function(Vue) {Vue.use(Button)Vue.use(Switch)Vue.use(Select)Vue.use(Option)// 往vue实例原型里添加消息提示，方便全局调用Vue.prototype.$msgbox = MessageBoxVue.prototype.$alert = MessageBox.alertVue.prototype.$confirm = MessageBox.confirmVue.prototype.$message = Message//使用：this.$message('这是一条消息提示');}}export default element
4、在 main.js 中引入组件
//element-ui样式引入import 'element-ui/lib/theme-chalk/index.css'//element-ui文件夹下import element from './element-ui/index'Vue.use(element)
测试事例：
<template><div id="index"><dv-full-screen-container class="bg"><dv-loading v-if="loading">Loading...</dv-loading><div v-elseclass="host-body"><el-select v-model="value"placeholder="请选择"><el-option v-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></dv-full-screen-container></div></template><script>export default {data () {return {loading: true,options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''};},components: {},mounted () {this.cancelLoading();},methods: {cancelLoading () {setTimeout(() => {this.loading = false;}, 500);}}};</script><style lang="scss">@import "../assets/scss/index.scss";</style>
