手动引入

// 1.安装依赖-生产依赖
npm install element-ui -S

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui'; // 2.1引入结构
import 'element-ui/lib/theme-chalk/index.css'; // 2.2引入样式
import App from './App.vue';

Vue.use(ElementUI); // 3.安装

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入(推荐)：自动（vue ui）方式

1.win + r 打开DOS窗口 键入 vue ui 回车打开图形化界面

2.vue项目管理器，打开（未打开过需要导入）项目

3.点击 插件 -> 添加插件，进入插件查询面板

4.键入：vue-cli-plugin-element 点击 -> 安装 vue-cli-plugin-element

5.How do you want to import Element 选择 import on demand（按需引入）

6.完成安装后，打开项目，src/plugins/element.js 文件展示了 Button 组件的按需引入，若需要其他组件，添加引入即可

按需引入生成代码

//main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './plugins/element.js'; // 引入js文件

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

// element.js 定义引入那些文件
import Vue from 'vue';
import { Button } from 'element-ui';

Vue.use(Button);

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

按需引入：手动方式

1.安装 Element ui

npm install element-ui -S

2.安装依赖

npm install babel-plugin-component -D

3.创建 element.js

import Vue from "vue";
import { Button } from "element-ui";

Vue.use(Button);

4.main.js 引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/element.js";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");