按需引入element ui，以及MessageBox消息确认

当码农一年多啦，发现都没有好好去记录下如何引入element ui，恰逢今日天时地利，就来记录下吧，一以贯之的微小积累，来获得最终的结果。

脚手架：vue-cli3

借助 babel-plugin-component 后，我们可以只引入需要的组件，以达到减小项目体积的目的：

npm install babel-plugin-component -D

更改.babelrc文件或者是 babel.config.js文件

  'plugins': [
    [
      'component',
      {
    
    
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]

创建文件： src\plugins\element.js ，然后按需引入需要的组件

import Vue from 'vue'
import {
    
     
  Button, 
  Form, 
  FormItem, 
  Input, 
  Message, 
  MessageBox
} from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm //消息确认

以上，按需引入element ui 就完成啦，接下来我们看下如何使用MessageBox消息确认吧

    async goOut() {
    
    
     // 直接复制修改成想要的
      const confirmResult = await this.$confirm('是否确认退出?', '提示', {
    
    
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).catch((err) => {
    
    
        return err
      })
      if (confirmResult !== 'confirm') {
    
    
        return this.$message.success('已取消退出！')
      }
     // 直接复制修改成想要的
      toLogout() //退出
    }