1、安裝

npm install element-ui --save-dev

2、在main.js檔案中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、上面兩步完成後，就可以在專案任意的元件中使用element-ui的元件了，具體使用方法，詳見官網

但是使用過程中，發現element-ui自帶的圖示特別少，不能滿足專案開發的需要，這就需要引入第三方圖示庫了。

1、點選進入官網，註冊並登入

2、登陸成功後，首頁的 圖示管理 => 我的專案 點選進入

3、點進來以後，是空的，點選右邊紫色的新增一個專案

4、彈出的彈框，輸入關於專案的資訊及設定，然後點選新建，新建專案成功。下圖中紅框中是比較重要的兩項

Font Family 是設定這個專案圖示的公共類名

FontClass/Symbol 字首  是設定這個專案的每個圖示的單獨類名的字首，最好不要設定為"el-icon"，避免與element-ui自帶的圖示類名重複

5、專案建立成功後，就可以在搜尋框中輸入我們需要的圖示關鍵字，會搜尋出來很多的圖示，選擇需要的，加入購物車

6、選擇完成以後，點選右上角的購物車，然後點選新增到專案，就會出現我們自己建立的專案，選中，點選確定就新增成功

7、新增成功以後，專案中就有我們需要的圖示了，然後下載到本地，並加壓下載的壓縮包

8、解壓出來的資料夾下有10個檔案，demo的四個檔案是圖示使用的例子，介紹了圖示使用的三種方式，

我們在專案中使用 fontclass方法，因此需要用到下圖中畫紅線的五個檔案。

9、在專案src/assets資料夾下，建立一個名為icon的資料夾，把需要用到的五個檔案拷貝進去

10、在專案的main.js中引入圖示樣式檔案

import './assets/icon/iconfont.css';

11、iconfont.css檔案中 .iconfont 類 設定我們引入的圖示的整體的樣式 ，.icon-xxx:before

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1537677824075'); /* IE9*/
  src: url('iconfont.eot?t=1537677824075#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUEAAsAAAAAB2wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8hkg1Y21hcAAAAYAAAABWAAABhmV10O5nbHlmAAAB2AAAATgAAAFQ16dO6WhlYWQAAAMQAAAALgAAADYSubn+aGhlYQAAA0AAAAAcAAAAJAfeA4RobXR4AAADXAAAAAwAAAAMDAAAAGxvY2EAAANoAAAACAAAAAgAOgCobWF4cAAAA3AAAAAeAAAAIAEQAE5uYW1lAAADkAAAAUUAAAJtPlT+fXBvc3QAAATYAAAAKgAAADvLYFe3eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeCTxzZm7438AQw9zA0AAUZgTJAQDjbgw2eJztkLERgDAMA99OSMFRMAYFW2QJKsbPGkFxYAt099ZZdiVgAZI4RQa7MYYupRZ5Yo08x0+RG972VnuHzyXTrYS7RuHXFvN4Nx9tTUazrU7wB1IlDpIAAHicTVC9SsNQGP2++5NYmoS2NDfpL42FpNQSMDa5lEKwCA6lin0B5zg4diqIvkBH0dUn6OYDCO4dM3W3jyBG7+jhLGc4PxygoEB75AcMaMAxAMaJH1jo2P2qV+V2Pw4xxUjYdU16sZ/ILupkp5+/PM+0a5IW3+NKGVtRy1gVn2x8fycpfmTmu6mYFbf4tssy9PxeV7jtXdZa60frJhCA3ycG9BHKMAPgPgQJSAGOBtRCvS6cRMgU+1LzAy0kZyEqpYodoemRRdS6wPGFIxInRTWPQF7sOUcvz9HjvNjn2wObRAM3ng4RSadkGYRUGCPs5uLqkiJjFUIMq9QhiMNp7A6iCft6+O9XefSVHbbLjawR27UXOExouxM1R2Y453wemqPmabdN4xNcYL1hY01ultuDevIPlrRCh3icY2BkYGAA4qUXj6+O57f5ysDNwgAC189aI9H/G1kYmBuADA4GJpAoAEE1CmgAAHicY2BkYGBu+N/AEMPCAAJAkpEBFTADAEcJAmwEAAAABAAAAAQAAAAAAAAAADoAqHicY2BkYGBgZnACYhBgAmIuIGRg+A/mMwAAD1IBXwAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAmZGJkZmRhYGjILG4uDy/KIWtMj8vPaOUgQEAQbkGNwAA') format('woff'),
  url('iconfont.ttf?t=1537677824075') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1537677824075#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-password:before { content: "\e610"; }

.icon-yonghu:before { content: "\e643"; }

12、挑選相應圖示並獲取類名，應用於頁面： 

<i class="iconfont icon-xxx"></i>

13、在element-ui輸入框中使用我們引入的圖示

<template>
  <div class="login">
    <el-form ref="form" :model="userForm" label-width="80px">
      <el-form-item label="賬號：">
        <el-input prefix-icon="iconfont icon-yonghu" v-model="userForm.account"></el-input>
      </el-form-item>
      <el-form-item label="密碼：">
        <el-input prefix-icon="iconfont icon-password" v-model="userForm.passward"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">登陸</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      userForm: {
        account: '',
        passward: ''
      }
    };
  }
};
</script>

<style lang="scss" scoped>
  .login{
    width: 300px;
    margin: 0 auto;
  }
</style>