官方文档：Element

1. 安装

可以使用 npm 安装，也可以通过 CDN 引入。

npm install element-ui  --save
// 带上版本号
npm install --save element-ui@版本号
<!-- CDN 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 引入 Element

完整引入
在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';    // 引入ui库
import 'element-ui/lib/theme-chalk/index.css';    // 引入css
import App from './App.vue';

Vue.use(ElementUI);    // 启用element-ui

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

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

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

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

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)
 */

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

3. 开始使用

element-ui 中有许多简洁美观的组件，可以再左侧栏中选择自己想要的组件，然后在里面选择想使用的样式，并在下面的代码中查看如何使用，以 Button 按钮为例。

<el-row>
  <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>
</el-row>

将文档给出的范例使用进自己的项目中，组件会自己在页面中显示出这几个按钮。

按钮

那么想要点击按钮弹出提示该怎么办呢？在左侧目录中找到 notice 一栏，以消息提示为例。

<template>
  <el-button :plain="true" @click="open2">成功</el-button>
  <el-button :plain="true" @click="open3">警告</el-button>
  <el-button :plain="true" @click="open1">消息</el-button>
  <el-button :plain="true" @click="open4">错误</el-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$message('这是一条消息提示');
      },
      open2() {
        this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },

      open3() {
        this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        });
      },

      open4() {
        this.$message.error('错了哦，这是一条错误消息');
      }
    }
  }
</script>

代码中使用的是 this.$message 的方法，点击文档上的按钮可以看到效果。那么很明显我们可以看出 message 里是弹出消息框中的文本信息。type 是主题，也就是根据不同的可选值会自己显示对应的颜色与图标。
既然知道了里面参数的用法，我们就可以将里面的内容改成我们想要的效果，别忘了还要添加上 @click 来触发事件。

快速使用

<template>
<el-button type="open">打开</el-button>
</template>
<script>
  export default {
    methods: {
      open() {
        this.$message('open...')
      }
    }
  }
</script>

在页面中点击 打开 按钮，就会有一条消息框弹出，并且内容是 open... 。

open...

4. 补充

4.1 自定义主题

如果在现成的组件中没有符合心意的界面，还可以在element-ui中使用自定义主题来制定自己喜欢的画面。
安装在项目里

npm install element-theme --save -dev
npm install element-theme-chalk --save -dev

因为不是全局安装，不能使用 et 这个命令。那么我们就在node_modules/.bin/ 文件夹下使用这个工具进行初始化。

node_modules/.bin/et -i

执行后当前目录会有一个 element-variables.scss 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。
但是只有scss文件还不够，需要编译生成css文件。

node_modules/.bin/et

直接输入 et，就会将文件编译生成 theme 主题文件，当前目录也会出现一个 theme 文件夹。这个文件夹里都是编译后的文件，所以要去修改变量的话，就在 element-variables.scss 文件里修改。
scss的语法可以去文档里了解一下，大致就是通过变量来控制。
然后在进行编译，使用 -w 意思是 watch 监听文件变化自动编译。

node_modules/.bin/et -w