一、對(duì)阿里巴巴矢量庫(kù)進(jìn)行的操作

1、首先點(diǎn)進(jìn)阿里巴巴矢量庫(kù)（阿里巴巴矢量圖標(biāo)庫(kù)官方文檔 https://www.iconfont.cn/）
2、進(jìn)行賬號(hào)注冊(cè)
3、選中想要的圖標(biāo)加入到購(gòu)物車(chē)

4、點(diǎn)購(gòu)物車(chē)會(huì)出現(xiàn)下面的頁(yè)面，然后選擇添加至項(xiàng)目

5、加入項(xiàng)目中選擇你想要把圖標(biāo)添加到哪個(gè)項(xiàng)目中，如果沒(méi)有要加入的項(xiàng)目（像我這種剛剛引入阿里巴巴矢量庫(kù)這種情況）可以新建項(xiàng)目，新建項(xiàng)目名稱(chēng)最好與本身項(xiàng)目名稱(chēng)一致（方便查看），當(dāng)然不一樣也可以，影響不大，因?yàn)槲覀兪且螺d到本地的
6、點(diǎn)擊確定，到下面的頁(yè)面，發(fā)現(xiàn)下面已經(jīng)存在了你想要添加的圖標(biāo)了

7、選中unicode，點(diǎn)擊下載到本地，會(huì)生成一個(gè)壓縮包將其進(jìn)行解壓縮。

8、我們需要下面四個(gè)文件放到我們的項(xiàng)目中

9、先不要關(guān)掉瀏覽器頁(yè)面，下面還會(huì)用到阿里巴巴矢量庫(kù)頁(yè)面。
二、對(duì)項(xiàng)目進(jìn)行的操作
1、我是在項(xiàng)目的common文件夾里新建了icon文件夾放入上面解壓出的四個(gè)文件，你們可以自己決定放在哪里，也有放在static里面的

2、在App.vue中引入iconfont.css文件，注意文件路徑

3、點(diǎn)擊iconfont.css文件，修改紅框部分代碼

得到修改部分代碼操作：
點(diǎn)擊查看在線(xiàn)鏈接




將iconfont.css文件對(duì)應(yīng)的部分修改，相信不用我都說(shuō)，大家都能找到。然后每個(gè)url前加上https:就可以啦！

三、在vue文件中使用，親測(cè)可用！

<i class="iconfont icon-all"></i><i class="iconfont icon-aligne-bottom2-fill"></i><i class="iconfont icon-chakan"></i><i class="iconfont icon-column-4"></i>

補(bǔ)充一點(diǎn)：我遇到個(gè)新問(wèn)題，如果有需求在main.js引入，但是打包apk報(bào)錯(cuò)main.js找不到樣式文件的話(huà)，就把main.js引入樣式文件語(yǔ)句注釋掉。沒(méi)有圖標(biāo)的話(huà)，App文件下面語(yǔ)句后加個(gè)逗號(hào)。

@import './common/icon/iconfont.css'; /* 逗號(hào)，重要的逗號(hào) */

總結(jié)

以上是生活随笔為你收集整理的uniapp开发App如何引入阿里巴巴矢量库图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。