【element ui】vue中引入element-ui组件

官网地址：https://element.faas.ele.me/#/zh-CN/component/layout

虽然官网介绍的也很详细了，但是初次配置引入的时候我还是出现了bug的，这里写一下我的过程：

1、npm安装

　 npm i element-ui --save

　（不论是全部加载还是按需加载，都先要安装组件。第一次配置的时候就是没有进行这一步，导致后面引入的时候一直出现模块不存在）

2、引入Element

　　（1）完整引入：

import Vue from 'vue';
import ElementUI from 'element-ui';// 全部组件引入
import 'element-ui/lib/theme-chalk/index.css';// 样式需要单独引入

Vue.use(ElementUI);

　　（2）按需引入：

　　借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

　　首先，安装 babel-plugin-component：

npm install babel-plugin-component -D // -D等同于--save-dev 开发依赖

　　然后，修改 .babelrc文件为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime", 
    [
      "component", 
      {
        "libraryName": "element-ui", 
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
  "env": {
    "test": {
      "presets": ["env", "stage-2"]
    }
  }
}

　　最后，按需加载：

import Vue from 'vue';
import { Button, Select } from 'element-ui';//按需加载模块
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

【element ui】vue中引入element-ui组件

推荐阅读