阿里巴巴的矢量庫(kù)中擁有巨量的圖標(biāo)，各式各樣，屬于一搜一大把的，而且矢量庫(kù)中允許使用png的形式下載，也就是說我們可以把圖標(biāo)作為圖片直接使用，這里我們不介紹。主要介紹一下類似elementUI的font-class的引入方式。

    首先，你要先擁有一個(gè)本網(wǎng)站的賬號(hào)，使用手機(jī)號(hào)就能注冊(cè)，不多贅述，在選擇下載方式的時(shí)候不要直接下載，而是點(diǎn)擊加入庫(kù)中。再把庫(kù)中所有的圖表加入到你的項(xiàng)目，如果沒有項(xiàng)目，你可以點(diǎn)擊右側(cè)創(chuàng)建一個(gè)和項(xiàng)目。

    接下來我們把鼠標(biāo)移動(dòng)到頭部導(dǎo)航的資源管理里，點(diǎn)擊我的項(xiàng)目，在這里你就能看見你創(chuàng)建的項(xiàng)目了。在項(xiàng)目中你可以更加細(xì)致的修改圖標(biāo)的顏色名字等，比較重要的是項(xiàng)目設(shè)置中FontClass前綴和fontfamily，當(dāng)你使用圖標(biāo)是這兩個(gè)全都會(huì)使用到。

    這是官方的調(diào)用方法。

    但是還有一種騷操作，如果你同時(shí)使用了elementUI，你可以使用element-icons作為fontfamily的值，這樣盡管你在class中不輸入element-icons也能夠正常顯示，但是不要使用el-作為前綴和elementUI的前綴重復(fù)。

    當(dāng)你設(shè)置好前綴和名字等，點(diǎn)擊項(xiàng)目上方下載至本地，你會(huì)得到一個(gè)壓縮文件，解壓后來到最里邊，你只需要留下以下幾個(gè)文件，剩下的都沒啥大用。

    接下來請(qǐng)把這些文件放到你項(xiàng)目中的某個(gè)文件夾里。推薦src文件夾->assets->文件夾下面創(chuàng)建名字為icon的文件夾。然后記住你創(chuàng)建的文件夾的位置，在main.js中引入iconfont.css

import('./assets/icon/iconfont.css')

    現(xiàn)在你就可以正常使用阿里巴巴的矢量圖了，如果你的想要添加新的矢量圖，別忘了更新文件夾里的文件，矢量圖的渲染依靠他們。

    如果你按照官方默認(rèn)的項(xiàng)目設(shè)置設(shè)置了矢量圖的前綴和fontfamily你可以使用官方如上的方法調(diào)用他們，類似elementui，只需要在i的class里輸入fontfamily名和前綴名+圖標(biāo)名就可以，下一篇文章為大家演示一下在項(xiàng)目中的應(yīng)用。