在使用vue cli3脚手架时，需要按需导入element-ui 组件，步骤如下：

1. 安装element-ui

?
1
npm i element-ui -S

 2. 按需导入需要安装，babel-plugin-component

?
1
npm install babel-plugin-component -D

 3.官网提供的是，将 .babelrc 修改为：

?
1
2
3
4
5
6
7
8
9
10
11
12
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

 注意：项目中没有.babelrc文件，无需新建.babelrc文件，直接可以在babel.config.js中配置即可，如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  presets: [
    '@vue/app',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

 这里需要注意：

需要安装最新的babel编译插件“@babel/preset-env”，检查一下自己项目插件版本，如果不是最新版，可执行以下命令安装
?
1
npm install @babel/preset-env -D

 4.在main.js中导入你需要的部分组件，如Button

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue';
import { Button } from 'element-ui';
import App from './App.vue';
 
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
 
new Vue({
  el: '#app',
  render: h => h(App)
});

 5. 在App.vue中，加入以下代码

?
1
2
3
4
5
6
7
8
9
10
<template>
  <div id="app">
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

 如果在浏览器中运行，出现如下样式，说明按需导入配置成功：