vue-cli 项目中按需加载Element-UI

方法一：传统引用

1.安装 element-ui

npm i element-ui -S

2.安装 babel-plugin-component

npm install babel-plugin-component -D

3.修改 babel.config.js（官网是说修改 .babelrc，实测新添加 .babelrc和直接修改 babel.config.js效果相同）

在vue原来生成的 babel.config.js的基础上做如下修改

{
  "presets": "@vue/cli-plugin-babel/preset",
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

4.按需引入 Button 和 Message

import { Button, Message } from 'element-ui'

Vue.component(Button.name, Button)
// 或者 Vue.use(Button)
Vue.prototype.$message = Message

方法二：插件引用

可以通过 element 插件快速集成 element-ui

vue add element

选择第二项即可

小结：实际项目中还是推荐插件方法实现按需加载