element-ui 按需加载使用步骤

截止时间 2020-8，vue2
element步骤（按需加载）
1.安装

npm i element-ui babel-plugin-component -D

2.应当在项目中添加.babelrc文件，但是由于已有babel.config.js文件，所以需要将两个文件合并

//.babelrc
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

//babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
}

合并到babel.config.js中

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

ps：改过配置之后一定要重启server
3 引入
在main.js中引入

import { Message···需要使用的组件} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//css文件很容易忘记引入

4 使用
两种方式
A.在每个需要使用的组件中引入

//componentA
import { Message} from 'element-ui';
Message.success("XXX成功")

B.利用原型，main.js文件中

import { Message} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Message)
Vue.prototype.$message=Message

//componentA中直接使用
this.$message.success("XXX成功")