按需使用element-ui

当我们使用elementui，又不想全部导入，而是按需导入时，可以使用一下步骤：

• 安装 babel-plugin-component
  npm install babel-plugin-component -D

• 配置babel，修改babel.config.js文件的内容（或者有/.babelrc文件则修改这个文件）

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

• 创建element.js文件
  1.可以创建一个element文件夹，然后下面创建index.js文件
  2.也可以创建一个plugins文件夹，然后下面创建element.js文件
  主要是用来管理element-ui的配置

• 在这个文件中引入需要使用的elementui组件，比如：

// element/index.js
import { Button, Select, Switch, MessageBox, Message } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Button)
    Vue.use(Switch)
    Vue.use(Select)
    // 下面这种写法是项目中的$xxx都被elementui对应的组件所替换
    Vue.prototype.$msgbox = MessageBox
    Vue.prototype.$alert = MessageBox.alert
    Vue.prototype.$confirm = MessageBox.confirm
    Vue.prototype.$message = Message
  }
}
export default element

• 在 main.js 中使用element.js文件，比如

import element from './plugins/element'

Vue.use(element)