一、對阿里巴巴矢量庫進行的操作

1、首先點進阿里巴巴矢量庫（阿里巴巴矢量圖標庫官方文檔 https://www.iconfont.cn/）
2、進行賬號注冊
3、選中想要的圖標加入到購物車

4、點購物車會出現(xiàn)下面的頁面，然后選擇添加至項目

5、加入項目中選擇你想要把圖標添加到哪個項目中，如果沒有要加入的項目（像我這種剛剛引入阿里巴巴矢量庫這種情況）可以新建項目，新建項目名稱最好與本身項目名稱一致（方便查看），當然不一樣也可以，影響不大，因為我們是要下載到本地的
6、點擊確定，到下面的頁面，發(fā)現(xiàn)下面已經(jīng)存在了你想要添加的圖標了

7、選中unicode，點擊下載到本地，會生成一個壓縮包將其進行解壓縮。

8、我們需要下面四個文件放到我們的項目中

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

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

3、點擊iconfont.css文件，修改紅框部分代碼

得到修改部分代碼操作：
點擊查看在線鏈接




將iconfont.css文件對應的部分修改，相信不用我都說，大家都能找到。然后每個url前加上https:就可以啦！

三、在vue文件中使用，親測可用！

<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>

補充一點：我遇到個新問題，如果有需求在main.js引入，但是打包apk報錯main.js找不到樣式文件的話，就把main.js引入樣式文件語句注釋掉。沒有圖標的話，App文件下面語句后加個逗號。

@import './common/icon/iconfont.css'; /* 逗號，重要的逗號 */

總結(jié)

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

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